JQuery+ajax实现批量上传图片(自写)

在网上搜索了一下，发现以jquery+ajax方式实现单张图片上传的代码是有的，但实现批量上传图片的程序却没搜索到，于是根据搜索到的代码，写了一个可以批量上传的。
先看效果图

点击增加按钮，会增加一个选择框，如下图：

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

上传成功如下图：

下面来看代码：
前台html主要代码：

<button id="subupload" class="managerbutton" onclick="tsubmituploadimagefile();return false;">确定上传</button>  
<button id="cancelupload" class="managerbutton" onclick="javascript：history.go(-1);">取消</button>  
<button id="addupload" class="managerbutton" onclick="taddfileupload();return false;">增加</button>
<tr><td class="tdclass">
图片1：
</td><td class="tdclass">
<input name="" size="60" id="uploadimg1" type="file" />
<span id="uploadimgstate1"></span>
</td></tr>

因为用了jquery，所以你完全可以把click事件放在js文件中
“增加”按钮js代码：

var tfileuploadnum=1; //记录图片选择框个数
var tnum=1; //ajax上传图片时索引
function taddfileupload()
{
var idnum = tfileuploadnum+1;
var str="<tr><td class='tdclass'>图片"+idnum+"：</td>";
str += "<td class='tdclass'><input name='' size='60' id='uploadimg"+idnum+"' type='file' /><span id='uploadimgstate"+idnum+"'>";
str += "</span></td></tr>";
("#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<tfileuploadnum+1)
{
//准备提交处理
("#uploadimgstate"+tnum).html("<img 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("<img src=../images/note_ok.gif />");//+stringarray[1]+"|"+stringarray[2]);
}
else
{
//上传出错
("#uploadimgstate"+tnum).html("<img src=../images/note_error.gif />"+stringarray[2]);//+stringarray[2]+"");
}
tnum++;
settimeout("tsubmituploadimagefile()",0);
}
});
}
}

上面的代码没什么可说的，很容易看懂。下面来看handler1.ashx(一般处理程序)如何来处理post过来的图片的(此代码来自网上，具体地址忘记了)，下面只给出关键代码，全部代码在附件里。
1、

string _filenamepath = "";
try
{
_filenamepath = context.request.form["upfile"];
//开始上传
string _savedfileresult = uploadfile(_filenamepath);
context.response.write(_savedfileresult);
}
catch
{
context.response.write("0|error|上传提交出错");
}

2、

//生成将要保存的随机文件名
string filename = getfilename() + filenameext;
//物理完整路径
string tofilefullpath = httpcontext.current.server.mappath(tofilepath);
//检查是否有该路径 没有就创建
if (!directory.exists(tofilefullpath))
{
directory.createdirectory(tofilefullpath);
}
///创建webclient实例
webclient mywebclient = new webclient();
//设定windows网络安全认证 方法1
mywebclient.credentials = credentialcache.defaultcredentials;
//要上传的文件
filestream fs = new filestream(filenamepath, filemode.open, fileaccess.read);
//filestream fs = openfile();
binaryreader r = new binaryreader(fs);
//使用uploadfile方法可以用下面的格式
//mywebclient.uploadfile(tofile, "put",filenamepath);
byte[] postarray = r.readbytes((int)fs.length);
stream poststream = mywebclient.openwrite(tofile, "put");
if (poststream.canwrite)
{
poststream.write(postarray, 0, postarray.length);
}

3、检查是否合法的上传文件

private bool checkfileext(string _fileext)
{
string[] allowext = new string[] { ".gif", ".jpg", ".jpeg" };
for (int i = 0; i < allowext.length; i++)
{
if (allowext[i] == _fileext) { return true; }
}
return false;
}

4、生成要保存的随即文件名

public static string getfilename()
{
random rd = new random();
stringbuilder serial = new stringbuilder();
serial.append(datetime.now.tostring("yyyymmddhhmmssff"));
serial.append(rd.next(0, 999999).tostring());
return serial.tostring();
}

ok，基本上这个批量上传图片的jquery+ajax方式实现的程序完成了。如果你要上传word文档，pdf文件，只要稍作修改，就可以实现了。