顺贷网,爱是分享,姚皓焱
本文实例在wap站项目中需要做一个ajax多图片上传，结合js插件做了一个，供大家参考，具体内容如下
我要评论
/* ajax 上传图片 */
var num = 0;
// 点击删除图片
function ondelete(num){
if($("#"+num).attr('src')!="__public__/home/images/jiazai.gif" && $("#"+num).attr('src')!=""){
if(confirm("确认删除吗")){
$("#a"+num).remove();
}else{
//
}
}
}
$(function(){
$("#file0").bind("change",function(){
clickupload(num);
});
function clickupload(num){
var imgobject = document.getelementbyid('file0'); // 文件对象
$("#yulan").append("<a id='a"+num+"' onclick='ondelete("+num+")' href='javascript:;'> <img id='"+num+"' width='75' height='75' src='__public__/home/images/jiazai.gif'/></a>");
// $("#yulan").append("<li id='a"+num+"' ><img id='"+num+"' src='__public__/home/images/jiazai.gif' /><a href='javascript:;' onclick='ondelete("+num+")'>删除</a></li>");
var getimagesrc = getfullpath(imgobject); // 本地路径
// 实例化image对象
var pos = getimagesrc.lastindexof(".");
var lastname = getimagesrc.substring(pos, getimagesrc.length) // 图片后缀
if(lastname!=".jpg" && lastname!=".png" && lastname!=".jpeg" && lastname!='.gif'){
$("#a"+num).remove();
alert("请选择一张图片");
}else{
ajaxfileupload(num);
$("#file0").unbind("change").bind("change",function(){
clickupload(num);
});
}
num++;
}
function getfullpath(obj) { //得到图片的完整路径
if (obj) {
if (window.navigator.useragent.indexof("msie") >= 1) {
obj.select();
return document.selection.createrange().text;
}else if (window.navigator.useragent.indexof("firefox") >= 1) {
if (obj.files) {
return obj.files.item(0).getasdataurl();
}
return obj.value;
}
return obj.value;
}
}
function ajaxfileupload(num) {
$.ajaxfileupload
(
{
url: 'http://xxxx/updateimg', //用于文件上传的服务器端请求地址
secureuri: false, //是否需要安全协议，一般设置为false
fileelementid: 'file0', //文件上传域的id
datatype: 'json', //返回值类型 一般设置为json
success: function (data) //服务器成功响应处理函数
{
var jsontext = data;
console.log(jsontext);
if(jsontext['status']==1){
if(jsontext['info']!=""){
console.log(jsontext['info']);
$("#"+num).attr("src","__public__//admin/upload/"+jsontext['info']);
var images = $("#img").val();
if(images!=""){
$("#img").val(images+","+jsontext['info']);
}else{
$("#img").val(images+""+jsontext['info']);
}
}
}else{
$("#a"+num).remove();
// alert("图片上传失败");
}
},
error: function (data,e)//服务器响应失败处理函数
{
alert(e);
}
}
)
}
});
以上就是本文的全部内容，希望对大家学习php程序设计有所帮助。
如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复
YII2框架中使用RBAC对模块，控制器，方法的权限控制及规则的使用示例
YII2框架中ActiveDataProvider与GridView的配合使用操作示例
PhpStorm的使用教程(本地运行PHP+远程开发+快捷键)
网友评论