01
2012
07

jQuery+Ajax实现批量上传图片

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

先看效果图

jQuery+Ajax实现批量上传图片_159934/1/2009 7:21:04 AM





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

jQuery+Ajax实现批量上传图片_159944/1/2009 7:21:04 AM




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

jQuery+Ajax实现批量上传图片_159954/1/2009 7:21:04 AM




上传成功如下图：


jQuery+Ajax实现批量上传图片_159964/1/2009 7:21:04 AM



jQuery+Ajax实现批量上传图片_159974/1/2009 7:21:04 AM




下面来看代码：

前台html主要代码：

  1. <button id="SubUpload" class="ManagerButton" onClick="TSubmitUploadImageFile();return false;">确定上传</button> 
     

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

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

  6.  
  7. <tr><td class="tdClass">
     

  8.  
  9.         图片1：
     

  10.  
  11.         </td><td class="tdClass">
     

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

  14.  
  15.         <span id="uploadImgState1"></span>
     

  16.  
  17.         </td></tr>
     
复制代码

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

“增加”按钮js代码：

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

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

  4.  
  5.         function TAddFileUpload()
     

  6.  
  7.         {
     

  8.  
  9.                   var idnum = TfileUploadNum+1;
     

  10.  
  11.                   var str="<tr><td class='tdClass'>图片"+idnum+"：</td>";
     

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

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

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

  18.  
  19.                   TfileUploadNum += 1;
     

  20.  
  21.         }
     
复制代码

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

  1.   function TSubmitUploadImageFile()
     

  2.  
  3.         {
     

  4.  
  5.                   M("SubUpload").disabled=true;
     

  6.  
  7.                   M("CancelUpload").disabled=true;
     

  8.  
  9.                   M("AddUpload").disabled=true;
     

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

  12.  
  13. }
     
复制代码

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

  1. Random rd = new Random();
     

  2.  
  3. StringBuilder serial = new StringBuilder();
     

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

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

  8.  
  9. return serial.ToString();
     
复制代码

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

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

  1.   function TajaxFileUpload()
     

  2.  
  3.         {
     

  4.  
  5.                   if(Tnum<TfileUploadNum+1)
     

  6.  
  7.                   {
     

  8.  
  9.                             //准备提交处理
     

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

  12.  
  13.                             //开始提交
     

  14.  
  15.                             $.ajax
     

  16.  
  17.                             ({
     

  18.  
  19.                                     type: "POST",
     

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

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

  24.  
  25.                                     success:function (data, status)
     

  26.  
  27.                                     {
     

  28.  
  29.                                               //alert(data);
     

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

  32.  
  33.                                              
     

  34.  
  35.                                               if(stringArray[0]=="1")
     

  36.  
  37.                                               {
     

  38.  
  39.                                                         //stringArray[0]    成功状态(1为成功，0为失败)
     

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

  42.  
  43.                                                         //stringArray[2]    消息提示
     

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

  46.  
  47.                                               }           
     

  48.  
  49.                                               else
     

  50.  
  51.                                               {
     

  52.  
  53.                                                         //上传出错
     

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

  56.  
  57.                                               }
     

  58.  
  59.                                               Tnum++;
     

  60.  
  61.                                             setTimeout("TSubmitUploadImageFile()",0);
     

  62.  
  63.                                       }
     

  64.  
  65.                             });                     
     

  66.  
  67.                   }
     

  68.  
  69.         }
     
复制代码

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

1、

  1.   string _fileNamePath = "";
     

  2.  
  3.             try
     

  4.  
  5.             {
     

  6.  
  7.                 _fileNamePath = context.Request.Form["upfile"];
     

  8.  
  9.                 //开始上传
     

  10.  
  11.                 string _savedFileResult = UpLoadFile(_fileNamePath);
     

  12.  
  13.                 context.Response.Write(_savedFileResult);
     

  14.  
  15.             }
     

  16.  
  17.             catch
     

  18.  
  19.             {
     

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

  22.  
  23.             }
     
复制代码

2、

  1. //生成将要保存的随机文件名
     

  2.  
  3. string fileName = GetFileName() + fileNameExt;
     

  4.  
  5. //物理完整路径                   
     

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

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

  10.  
  11. if (!Directory.Exists(toFileFullPath))
     

  12.  
  13. {
     

  14.  
  15.     Directory.CreateDirectory(toFileFullPath);
     

  16.  
  17. }
     

  18.  
  19. ///创建WebClient实例     
     

  20.  
  21. WebClient myWebClient = new WebClient();
     

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

  24.  
  25. myWebClient.Credentials = CredentialCache.DefaultCredentials;
     

  26.  
  27. //要上传的文件     
     

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

  30.  
  31. //FileStream fs = OpenFile();     
     

  32.  
  33. BinaryReader r = new BinaryReader(fs);
     

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

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

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

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

  42.  
  43. if (postStream.CanWrite)
     

  44.  
  45. {
     

  46.  
  47. postStream.Write(postArray, 0, postArray.Length);
     

  48.  
  49. }
     
复制代码

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

  1. private bool CheckFileExt(string _fileExt)
     

  2.  
  3. {
     

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

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

  8.  
  9.     {
     

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

  12.  
  13.     }
     

  14.  
  15.     return false;
     

  16.  
  17. }
     
复制代码

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

  1. public static string GetFileName()
     

  2.  
  3. {
     

  4.  
  5.             Random rd = new Random();
     

  6.  
  7.             StringBuilder serial = new StringBuilder();
     

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

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

  12.  
  13.             return serial.ToString();
     

  14.  
  15. }
     
复制代码

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

转载：http://www.pin5i.com/showtopic-23571.html

Tags: AJAX  
发布:郑德才博客 | 分类:学习之路 | 评论:0 | 浏览:
« 上一篇下一篇 »

相关文章:

不依赖JQuery的入门Ajax代码  (2013-10-22 14:30:6)

AJAX如何接收JSON数据  (2013-8-13 21:2:43)

学习.net与ajax的详细案例总结  (2013-5-18 22:20:35)

解决FCKeditor在ASP.NET AJAX的UpdatePanel控件中按钮回调后内容不能编辑及丢失的问题  (2012-5-8 20:18:34)

发表评论:

◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。