jQuery+Ajax实现批量上传图片

[ 61358 / 368 / 106 ]

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

先看效果图

jQuery+Ajax实现批量上传图片_15993



点击增加按钮,会增加一个选择框,如下图:

jQuery+Ajax实现批量上传图片_15994


选择要上传的图片,效果图如下:

jQuery+Ajax实现批量上传图片_15995


上传成功如下图:


jQuery+Ajax实现批量上传图片_15996

jQuery+Ajax实现批量上传图片_15997


下面来看代码:

前台html主要代码:
  1. <button id="SubUpload" class="ManagerButton" onClick="TSubmitUploadImageFile();return false;">确定上传</button> 

  2. <button id="CancelUpload" class="ManagerButton" onClick="javascript:history.go(-1);">取消</button> 

  3. <button id="AddUpload" class="ManagerButton" onClick="TAddFileUpload();return false;">增加</button>

  4. <tr><td class="tdClass">

  5.         图片1:

  6.         </td><td class="tdClass">

  7.         <input name="" size="60" id="uploadImg1" type="file" />

  8.         <span id="uploadImgState1"></span>

  9.         </td></tr>
复制代码
因为用了JQuery,所以你完全可以把click事件放在js文件中

“增加”按钮js代码:
  1. var TfileUploadNum=1; //记录图片选择框个数

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

  3.         function TAddFileUpload()

  4.         {

  5.                   var idnum = TfileUploadNum+1;

  6.                   var str="<tr><td class='tdClass'>图片"+idnum+":</td>";

  7.                   str += "<td class='tdClass'><input name='' size='60' id='uploadImg"+idnum+"' type='file' /><span id='uploadImgState"+idnum+"'>";

  8.                   str += "</span></td></tr>";

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

  10.                   TfileUploadNum += 1;

  11.         }
复制代码
“确定上传”按钮js代码:
  1.   function TSubmitUploadImageFile()

  2.         {

  3.                   M("SubUpload").disabled=true;

  4.                   M("CancelUpload").disabled=true;

  5.                   M("AddUpload").disabled=true;

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

  7. }
复制代码
关于setTimeout("TajaxFileUpload()",1000);这句代码:因为所谓的批量上传,其实还是一个一个的上传,给用户的只是一个假象。只所以要延时执行TajaxFileUpload(),是因为在把图片上传到服务器上时,我在后台给图片重新命名了,命名的规则是,如下代码:
  1. Random rd = new Random();

  2. StringBuilder serial = new StringBuilder();

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

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

  5. return serial.ToString();
复制代码
即使我命名精确到毫秒,另外再加上随机数,可是还是有上传的第二张图片把上传的第一张图片覆盖的情况出现。所以此处我设置了延时1秒后在上传下一张图片。刚开始做这个东西的时候,用的是for循环,来把所有的图片一个一个的循环地用ajax上传,可是for循环速度太快了,可能第一张图片还没来得及ajax,第二张就被for过来了,还是有第二张覆盖第一张的情况出现。

下面来看TajaxFileUpload()函数,代码如下:
  1.   function TajaxFileUpload()

  2.         {

  3.                   if(Tnum<TfileUploadNum+1)

  4.                   {

  5.                             //准备提交处理

  6.                             $("#uploadImgState"+Tnum).html("<img src=../images/loading.gif />");

  7.                             //开始提交

  8.                             $.ajax

  9.                             ({

  10.                                     type: "POST",

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

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

  13.                                     success:function (data, status)

  14.                                     {

  15.                                               //alert(data);

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

  17.                                              

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

  19.                                               {

  20.                                                         //stringArray[0]    成功状态(1为成功,0为失败)

  21.                                                         //stringArray[1]    上传成功的文件名

  22.                                                         //stringArray[2]    消息提示

  23.                                                         $("#uploadImgState"+Tnum).html("<img src=../images/note_ok.gif />");//+stringArray[1]+"|"+stringArray[2]);

  24.                                               }           

  25.                                               else

  26.                                               {

  27.                                                         //上传出错

  28.                                                         $("#uploadImgState"+Tnum).html("<img src=../images/note_error.gif />"+stringArray[2]);//+stringArray[2]+"");

  29.                                               }

  30.                                               Tnum++;

  31.                                             setTimeout("TSubmitUploadImageFile()",0);

  32.                                       }

  33.                             });                     

  34.                   }

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

1、
  1.   string _fileNamePath = "";

  2.             try

  3.             {

  4.                 _fileNamePath = context.Request.Form["upfile"];

  5.                 //开始上传

  6.                 string _savedFileResult = UpLoadFile(_fileNamePath);

  7.                 context.Response.Write(_savedFileResult);

  8.             }

  9.             catch

  10.             {

  11.                 context.Response.Write("0|error|上传提交出错");

  12.             }
复制代码
2、
  1. //生成将要保存的随机文件名

  2. string fileName = GetFileName() + fileNameExt;

  3. //物理完整路径                   

  4. string toFileFullPath = HttpContext.Current.Server.MapPath(toFilePath);

  5. //检查是否有该路径 没有就创建

  6. if (!Directory.Exists(toFileFullPath))

  7. {

  8.     Directory.CreateDirectory(toFileFullPath);

  9. }

  10. ///创建WebClient实例     

  11. WebClient myWebClient = new WebClient();

  12. //设定windows网络安全认证  方法1

  13. myWebClient.Credentials = CredentialCache.DefaultCredentials;

  14. //要上传的文件     

  15. FileStream fs = new FileStream(fileNamePath, FileMode.Open, FileAccess.Read);

  16. //FileStream fs = OpenFile();     

  17. BinaryReader r = new BinaryReader(fs);

  18. //使用UploadFile方法可以用下面的格式     

  19. //myWebClient.UploadFile(toFile, "PUT",fileNamePath);     

  20. byte[] postArray = r.ReadBytes((int)fs.Length);

  21. Stream postStream = myWebClient.OpenWrite(toFile, "PUT");

  22. if (postStream.CanWrite)

  23. {

  24. postStream.Write(postArray, 0, postArray.Length);

  25. }
复制代码
3、检查是否合法的上传文件
  1. private bool CheckFileExt(string _fileExt)

  2. {

  3.     string[] allowExt = new string[] { ".gif", ".jpg", ".jpeg" };

  4.     for (int i = 0; i < allowExt.Length; i++)

  5.     {

  6.         if (allowExt == _fileExt) { return true; }

  7.     }

  8.     return false;

  9. }
复制代码
4、生成要保存的随即文件名
  1. public static string GetFileName()

  2. {

  3.             Random rd = new Random();

  4.             StringBuilder serial = new StringBuilder();

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

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

  7.             return serial.ToString();

  8. }
复制代码
Ok,基本上这个批量上传图片的jQuery+Ajax方式实现的程序完成了。如果你要上传word文档,pdf文件,只要稍作修改,就可以实现了。

代码下载:
附件: 亲,您没有权限下载或查看附件喔:-) 试试登录注册吧!
TOP

好好学习一下
TOP

恩,不错,顶个~~~
TOP

正在找这个,谢谢!
TOP

测试

测试用土
TOP

不错,学习学习
TOP

学习学习  !!
TOP

bucuo
TOP

我来学习一下····顶~
TOP

学习

学习学习
TOP