JQuery+ajax实现批量上传图片

JQuery+ajax实现批量上传图片先看效果图

选择要上传的图片，效果图如下：

上传成功如下图：

前台html主要代码：

确定上传  

取消  

增加

图片1：

因为用了JQuery，所以你完全可以把click事件放在js文件中

“增加”按钮js代码：

var TfileUploadNum=1; //记录图片选择框个数

var Tnum=1; //ajax上传图片时索引

function TAddFileUpload()

{

var idnum = TfileUploadNum+1;

var str="图片"+idnum+"：";

str += "

id='uploadImg"+idnum+"' type='file' />";

str += "";

$("#imgTable").append(str);

TfileUploadNum += 1;

}

“确定上传”按钮js代码：

function TSubmitUploadImageFile()

{

M("SubUpload").disabled=true;

M("CancelUpload").disabled=true;

M("AddUpload").disabled=true;

setTimeout("TajaxFileUpload()",1000);//此为关键代码

}

关于setTimeout("TajaxFileUpload()",1000);这句代码：因为所谓的批量上传，其实还是

一个一个的上传，给用户的只是一个假象。只所以要延时执行TajaxFileUpload()，是因为在把图片上传到服务器上时，我在后台给图片重新命名了，命名的规则是，如下代码：Random rd = new Random();

StringBuilder serial = new StringBuilder();

serial.Append(DateTime.Now.ToString("yyyyMMddHHmmssff"));

serial.Append(rd.Next(0, 999999).ToString());

return serial.ToString();

即使我命名精确到毫秒，另外再加上随机数，可是还是有上传的第二张图片把上传的第一张

图片覆盖的情况出现。所以此处我设置了延时1秒后在上传下一张图片。刚开始做这个东西

的时候，用的是for循环，来把所有的图片一个一个的循环地用ajax上传，可是for循环速度

太快了，可能第一张图片还没来得及ajax，第二张就被for过来了，还是有第二张覆盖第一张的情况出现。

下面来看TajaxFileUpload()函数，代码如下：

function TajaxFileUpload()

{

if(Tnum

{

//准备提交处理

$("#uploadImgState"+Tnum).html("

src=../images/loading.gif />");

//开始提交

$.ajax

({

type: "POST",

url:"http://localhost/ajaxText2/Handler1.ashx",

data:{upfile:$("#uploadImg"+Tnum).val (),category:$("#pcategory").val()},

success:function (data, status)

{

//alert(data);

var stringArray = data.split ("|");

if(stringArray[0]=="1")

{

//stringArray[0] 成功

状态(1为成功，0为失败)

//stringArray[1] 上传

成功的文件名

//stringArray[2] 消息

提示

$("#uploadImgState"+Tnum).html("

/>");//+stringArray[1]+"|"+stringArray[2]);

}

else

{

//上传出错

$("#uploadImgState"+Tnum).html("

/>"+stringArray[2]);//+stringArray[2]+"");

}

Tnum++;

setTimeout("TSubmitUploadImageFile

()",0);

}

});

}

}

上面的代码没什么可说的，很容易看懂。下面来看Handler1.ashx(一般处理程序)如何来处