.Net多文件同时上传（Jquery Uploadify）

前提：领导给了我一个文件夹，里面有4000千多张产品图片，每张图片已产品编号+产品名称命名，要求是让我把4000多张产品图片上传到服务器端，而且要以产品编码创建n个文件夹，每张图片放到对应的文件夹下。

思路：1、开始的思路是将整个文件夹都上传到服务器端，但查找资料获得，FileUpload只能上传文件，不能上传文件夹，从而得出另外一种方案，将文件夹压缩，然后便可以上传到服务器端，然后再服务器端解压，解压之后再去每个文件从新读取并放到对应的文件夹下。思量再三，觉得很是麻烦。

　　　2、第二个思路，文件批量上传，在将文件上传到服务器端对应的文件夹下。感觉思路甚好。再查询资料，发现FileUpload控件的使用中，一个FileUpload控件一次只能选择一个文件，不能同时选择多个文件，果断放弃使用FileUpload上传文件，发现Jquery Uploadify是个不错的选择（注：为了安全，上传文件时是获得不到用户上传文件的本地路径）。

实战：Jquery Uploadify的使用

1、需要的js和css文件

2、添加产品类别的选择，用于向数据库新增数据时区分图片类别，图片类别分三种（1：包装；2：产品；3：标识）

js的引用：

 <link href="../js/Uploadify/uploadify.css" rel="stylesheet" type="text/css" />
 <script src="../js/jquery-1.6.js" type="text/javascript"></script>
 <script type="text/javascript" src="../js/Uploadify/jquery.uploadify.min.js"></script>

前端html代码：

 <form id="form1" runat="server">
         <div style="position:absolute; top:10px; left:150px; width:500px;">
             <%--用来作为文件队列区域--%>
             <div id="fileQueue">
             </div>
             <table style="font-size:15px; font-family:宋体;">
                 <tr>
                     <th>产品图片类型：</th>
                     <td>
                         <input type="radio" id="rad1" value="" name="radImageflg" checked="checked"/>包装
                         <input type="radio" id="rad2" value="" name="radImageflg"/>产品
                         <input type="radio" id="rad3" value="" name="radImageflg" />标识
                     </td>
                 </tr>
                 <tr>
                     <td>
                         <input type="file" name="uploadify" id="uploadify" />
                          <%--<a href="javascript:$('#uploadify').uploadify('upload')">上传</a>| --%>
                     </td>
                     <td>
                         <img src="../images/quxiao.gif" onclick="cancelUpload()" />
                     </td>
                 </tr>
             </table>
         </div>
     </form>

效果图：

js代码：

 <script type="text/javascript">
         //取消上传
         function cancelUpload() {
             $('#uploadify').uploadify('cancel')
         }
         $(function () {
             $("#uploadify").uploadify({
                 //指定swf文件
                 'swf': '../js/Uploadify/uploadify.swf',
                 //后台处理的页面
                 'uploader': 'PicUploadHandler.ashx',
                 //按钮显示的文字
                 'buttonText': '上传图片',
                 //显示的高度和宽度，默认 height 30；width 120
                 //'height': 15,
                 //'width': 80,
                 //上传文件的类型  默认为所有文件    'All Files'  ;  '*.*'
                 //在浏览窗口底部的文件类型下拉菜单中显示的文本
                 'fileTypeDesc': 'Image Files',
                 //允许上传的文件后缀
                 'fileTypeExts': '*.gif; *.jpg; *.png',
                 //发送给后台的其他参数通过formData指定
                 //'formData': { 'opt': 'upload', 'imageflg': $('input:radio[name="radImageflg"]:checked').val() },
                 //上传文件页面中，你想要用来作为文件队列的元素的id, 默认为false  自动生成,  不带#
                 //'queueID': 'fileQueue',
                 //选择文件后自动上传
                 'auto': true,
                 //设置为true将允许多文件上传
                 'multi': true,
                 'queueSizeLimit': "",
                 'onUploadStart':function(file){
                     var data = {};
                     data.opt = 'upload';
                     data.imageflg = $('input:radio[name="radImageflg"]:checked').val();
                     $("#uploadify").uploadify('settings', 'formData', data);
                 },
                 'onUploadSuccess': function (file, data, response) {   //当文件上传成功时触发
                     if (data) {
                         if (data.indexOf("error") != -) {
                             alert("上传失败:" + data);
                         }
                     }
                 },
                 'onUploadError': function (file, errorCode, errorMsg) {
                     alert("上传失败:" + errorMsg);
                     this.settings.removeCompleted = false;
                 }
             });
         });

     </script>

说明：uploadify参数：swf：swf在下载的文档中就可以找到，路径一定要正确，否则不能打开选择文件的窗口；

动态传递参数：用户选择的图片类别，图片上传时，将图片类别传到后台，在页面加载的时候就直接加了Uploadify的相关参数设置，所以不能在Uploadify中传递参数，如何动态传递参数呢？

在页面此时就用到了'onUploadStart'方法，当开始上传时调用该方法，使用的方法是设置uploadify的formData参数

 'onUploadStart':function(file){
                     var data = {};
                     data.opt = 'upload';
                     data.imageflg = $('input:radio[name="radImageflg"]:checked').val();
                     $("#uploadify").uploadify('settings', 'formData', data);
                 }

一般处理程序：

 /// <summary>
     /// 上传文件
     /// </summary>
     /// <param name="context"></param>
     private void UploadFile(HttpContext context)
     {
         //接收上传后的文件
         HttpPostedFile file = context.Request.Files["Filedata"];
         int imageflg = context.Request["imageflg"] != null ? int.Parse(context.Request["imageflg"].ToString()) : -;
         if (imageflg == - || file == null)
         {
             context.Response.Write("参数有错");
         }
         else
         {
             //获取文件的保存路径
             string filePath = HttpContext.Current.Server.MapPath(@"~/JTERPIMG");
             //判断上传的文件是否为空
             if (file != null)
             {
                 try
                 {
                     string res = (new ERPCLB.BLL.BasicData.PicUploadBLL()).UploadPic(file, filePath, imageflg);
                     context.Response.Write(res);
                 }
                 catch (Exception ex)
                 {
                     context.Response.Write("error:错误图片名称：" + file.FileName + ";" + ex.Message);
                 }
             }
             else
             {
                 context.Response.Write("没有检测到要上传的文件");
             }
         }
     }    

后台代码：

  /// <summary>
         /// 导入图片并新增数据
         /// </summary>
         /// <param name="file">上传的文件信息</param>
         /// <param name="filePath">文件路径</param>
         /// <param name="imageflg">文件类型（1：包装；2：产品；3：标识）</param>
         /// <returns></returns>
         public string UploadPic(HttpPostedFile file, string filePath, int imageflg)
         {
             PicUploadDAL dal=new PicUploadDAL();
             string fileName = file.FileName;

             //string fileName = "0000002 2 副箱中间轴焊接总成1";            

             string itemno = fileName.Substring(, );  //截取前7位获得产品编码
             //string imageflg = fileName.Substring(itemno.Length, 1); //获得图片类型         

             int lined = dal.GetLineByItemno(itemno);//获得该产品图片的最大项号
             #region 上传图片
             //上传图片
             filePath = Path.Combine(filePath, itemno);  //服务器端图片路径
             if (!Directory.Exists(filePath))  //如果目录不存在，则新建
             {
                 Directory.CreateDirectory(filePath);
             }
             file.SaveAs(filePath + "\\" + fileName);//保存文件
             #endregion

             #region 对图片重命名
             string currFilePath = Path.Combine(filePath, fileName); //上传到服务器端的路径
             string sourceFileName = currFilePath;
             FileInfo fileInfo = new FileInfo(sourceFileName);
             string newName = itemno + "_" + lined + fileInfo.Extension;  //重新组织文件名称
             currFilePath = Path.Combine(filePath, newName);
             //判断重命名的文件是否存在，如果存在，则删除
             if (File.Exists(currFilePath))
             {
                 File.Delete(currFilePath);
             }
             fileInfo.MoveTo(currFilePath);
             #endregion

             if (File.Exists(currFilePath))  //如果该路径下已经存在图片，说明导入成功，导入成功后，向数据库插入数据
             {
                 PicExplorer pic = new PicExplorer()
                 {
                     itemno = itemno,
                     lineid = lined,
                     filename = newName,
                     imageflg = imageflg
                 };
                 int res = (new PicUploadDAL()).InsertPic(pic);
                 if (res > )
                 {
                     return newName;
                 }
                 else
                 {
                     return "error";
                 }
             }
             else
             {
                 return "error";
             }            

         }
     }

遇到的问题：

文件上传过程中，不但要将文件保存到服务器端的某个文件夹下，同时还要向数据库中插入数据，一开的想法是文件上传成功之后，向数据库中插入数据，也就是说放到"OnUploadSuccess"事件中，在使用ajax的Post方式调用后台插入数据的方法。但是插入少点图片没有问题，当插入700多张图片时，就会报错（此时我是设置了用户选择文件之后自动上传（auto参数设置为true），而不需要用户手动点击上传按钮。如果设置文件不是自动上传，也就是说用户手动点击了上传按钮之后再上传，估计问题会解决，但未尝试），原因是违反了主键约束，思量再三，感觉是上传成功与调用Post方法时产生冲突，未找到原因。

所以改为另外一种方案，在文件上传的过程中，判断服务器端对应的路径下面是否已经存在该图片，如果存在，则说明上传成功，如果不存在则说明上传失败，失败的话也就不需要再走向数据库插入数据的方法。