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

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

点击添加按钮，添加选择框，如下图所示：。

选择要上传的图片，渲染如下：。

上传成功，如下图：。

看下面的代码：前台html的主代码：复制代码的代码如下： button id=' sub upload ' class=' managerbutton ' onclick=' tsubimploadimagefile()；返回false'请确保上传/button button id=' cancelupload ' class=' managerbutton ' onclick=' JavaScript:history . go(-1)；'cancel/button button id=' addupload ' class=' managerbutton ' onclick=' tadd file upload()；返回false'Add /button trtd class='tdClass '图片1:/tdtd class=' TD class '输入名称size=' 60 ' id=' uploadimg1 '类型=' file '/span id=' uploadimgstate 1 '/span/TD/Tr使用JQuery，因此可以将click事件放在js文件中并“添加”按钮js代码：复制代码如下： var TfileUploadNum=1；//记录图片选择框的数量var Tnum=1；//index函数tadd file upload()当//ajax上传图片时{ varinum=tfileuploadnum1Var=' trtd class=' tdclass '图片' idnum ':/TD '；str='td class='tdClass '输入名称size=' 60 ' id=' uploadImg ' idnum ' '类型=' file '/span id=' uploadImgState ' idnum ' '；str='/span/TD/tr '；(' #imgTable ')。追加(字符串)；TfileUploadNum=1；}“确定上传”按钮js代码：复制代码如下： Function tsubimitloadimagefile(){ m(' sub upload ')。disabled=truem(' cancel load ')。disabled=trueM('AddUpload ')。disabled=truesetTimeout('TajaxFileUpload()'，1000)；//这是关于settimeout ('tajaxfileupload()'，1000)的关键代码}；这段代码：因为所谓的批量上传其实就是一个一个的上传，对用户来说只是一个假象。所以只需要延迟TajaxFileUpload()的执行就可以了，因为我在上传到服务器的时候，在后台对图片进行了重命名。命名规则如下：复制的代码如下： Random rd=new Random()；StringBuilder serial=new StringBuilder()；连环杀手。追加(日期时间。now . ToString(' yyyymmdhhmmssff ')；连环杀手。追加(rd。下一个(0，999999)。ToString())；返回序列号。ToString()；即使我的名字精确到毫秒，加上随机数，仍然有第二张上传图片覆盖第一张上传图片的情况。所以在这里我设置了1秒的延迟，然后再上传下一张图片。当我开始这样做的时候，我使用了一个for循环，通过ajax一个一个地上传所有的图片。然而，for循环太快了，所以可能第一张图片还没有时间给ajax，第二张图片就来了，或者有第二张图片覆盖了第一张图片的情况。我们来看看TajaxFileUpload()函数，代码如下：复制代码如下： function TajaxFileUpload(){ if(tnumtfileuploadnum){//准备提交进行处理(' # uploadimg state' tnum)。html ('img src=./images/loading.gif/')。//开始提交。Ajax ({type:' post '，URL : ' http://localhost/Ajax text 2/handler 1 . ashx '，data : { upfile 3360 '(# uploadimg ' tnum))。val()，类别：('#pcategory ')。val()}，success:function(数据，状态){ //alert(数据)；var StringArray=data . split(' | ')；if(string array[0]==' 1 '){//string array[0]成功状态(1为成功，0为失败)//stringArray[1]成功上传的文件名//stringArray[2]消息提示(' uploadimg state' tnum)。html ('img src=././/StringArray[1]' | ' StringArray[2])；} else {//上传错误(# uploadimg state' tnum)。html ('img src=./images/note _ error.gif/'stringarray[2])；//StringArray[2]' ')；} TnumsetTimeout(' tsubimiteloadimagefile()'，0)；} });}}以上代码无话可说，简单易懂。我们来看看Handler1.ashx(通用处理程序)是如何处理帖子图片的(这段代码来自互联网，具体地址忘记了)。下面只给出了关键代码，所有代码都在附件中。

1、复制代码代码如下：string _ fileNamePath=请尝试{ _文件名路径=上下文.请求。表单[' upfile ']；//开始上传string _ savedfilereresult=UpLoadFile(_ fileNamePath)；语境。响应。写入(_ savedfilereresult)；}捕获{上下文。响应。写入(' 0 |错误|)上传提交出错');} 2、复制代码代码如下：//生成将要保存的随机文件名字符串fileName=GetFileName()fileName ext；//物理完整路径filefullpath=HttpContext的字符串.当前。服务器。mappath(到文件路径)；//检查是否有该路径没有就创建if(！目录。存在（到文件完整路径)){目录CreateDirectory(到file full path)；} ///创建网络客户端实例WebClient myWebClient=new WebClient()；//设定窗子网络安全认证方法一我的网络客户端。凭据=凭据缓存默认凭据//要上传的文件FileStream fs=新的FileStream(文件名称路径，文件模式。打开，文件访问。阅读);//FileStream fs=Openfile()；二进制阅读器r=新的二进制阅读器(fs)；//使用上传文件方法可以用下面的格式//我的网络客户端.上传文件(toFile，‘PUT’，文件名路径)；byte[]PostArray=r . readBytes((int)fs .长度);流后流=我的网络客户端.OpenWrite(toFile，‘PUT’)；if (postStream .CanWrite) { postStream .写（后置数组，0,后置数组。长度);} 3、检查是否合法的上传文件复制代码代码如下：私有bool CheckFileExt(string _ FileExt){ string[]AllowExt=new string[]{ ' .gif '，' .jpg '，' .JPEG ' }；for(int I=0；我同意。长度；I){ if(allowExt[I]==_ file ext){ return true；} }返回假)4、生成要保存的随即文件名复制代码代码如下：公共静态字符串GetFileName(){ Random rd=new Random()；StringBuilder serial=new StringBuilder()；连环杀手。追加（日期时间现在。ToString(' yyymmdhmmssff ')；连环杀手。追加(rd .下一个(0,999999)。ToString())；返回序列号. ToString()；}好的，基本上这个批量上传图片的JQuery ajax方式实现的程序完成了。如果你要上传单词文档，pdf文件，只要稍作修改，就可以实现了。