asp.net/.net用ajax实现多文件上传

时间:2016-11-18553举报小编:youjiejie

    用asp.net实现文件上传其实是非常容易的,但是想要更高的要求,比如通过ajax上传文件、一次上传多个文件、文件比较大等等,这里面的坑就不是很容易填(对于新手来说)。因此在这里我准备通过ajax实现多文件上传。在开始贴代码之前,要注意几点:

      1.<input type="file" />是必须要加name的,不知道为什么不加name属性,后台获取不到文件数据(有办法的大神可以在评论区提醒我),然后是multiple属性,当multiple="multiple"时,file控件是可以多选需要上传的文件的(<input type="file" multiple="multiple"  name="myFile" />)。

      2.form要设enctype为multiple/form-data,multipart/form-data表示:不对字符编码,在使用包含文件上传控件的表单时,必须使用该值。关于enctype的详细讲解可以查看http://www.jb51.net/web/165444.html

      3.重点来了,ajax的参数设置里面有大坑(很多人都没注意ajax的众多参数),contentType和processData需要设为false,contentType明明被要求为string类型,但是这里要设为false(我也不知道为什么),网上关于contentType的说明大多是"contentType:要求为String类型的参数,当发送信息至服务器时,内容编码类型默认为"application/x-www-form-urlencoded"。该默认值适合大多数应用场合",还有个data要设为new FormData($(' ')[0]),想了解其他参数的可看这个http://www.jb51.net/article/95425.htm 。

      下面就是简单的前台代码:

    <form id="uploadForm" enctype="multipart/form-data" action="/Login/uploadFile" method="post">
     <input type="file" multiple="multiple" id="PersonFile" name="MyFile" />
     <button type="button" id="submitFile" onclick="uploadFile()">提交</button>
    </form>
    //上传文件
     function uploadFile() {
      debugger
      $.ajax({
      url: '/Login/uploadFile',
      type: 'POST',
      cache: false,
      data: new FormData($('#uploadForm')[0]),
      processData: false, // 关键点
      contentType: false, // 关键点
      success: function (result) {
       if (result.Check) {
       alert("成功");
       }
       else {
       alert("失败");
       }
       var file = $("#PersonFile")
       file.after(file.clone().val(""));
       file.remove();
      }
      });
     }

    现在轮到后台了,我这边后台是通过System.Web.HttpContext.Current.Request.Files获取文件数据集的,之后的代码我将以图片为例。

    [HttpPost]
    public ActionResult uploadFile()
    {
     Result<string> check = new Result<string>();
     try
     {
     HttpFileCollection files = System.Web.HttpContext.Current.Request.Files;
     int number = 0;
     for (int i = 0; i < files.Count; i++)
     {
      System.Text.StringBuilder fileName = new System.Text.StringBuilder();
      fileName.Append(@"D:\");
      fileName.Append(DateTime.Now.ToString("yyMMdd"));
      fileName.Append(@"\");
      if (!System.IO.Directory.Exists(fileName.ToString()))
      {
      System.IO.Directory.CreateDirectory(fileName.ToString());
      }
      fileName.Append(System.IO.Path.GetFileNameWithoutExtension(files[i].FileName));
      fileName.Append(DateTime.Now.ToString("yyMMddHHmmss"));
      fileName.Append(System.IO.Path.GetExtension(files[i].FileName));
     
      System.IO.Stream sm = files[i].InputStream;
      if (System.IO.File.Exists(@"D:\水印log.jpg"))
      {
      ImageHelper.ZoomAuto(sm, fileName.ToString(), 400, 300, "", @"D:\水印log.jpg");
      }
      else
      {
      ImageHelper.ZoomAuto(sm, fileName.ToString(), 400, 300, "水印LOG", "");
      }
      bool ok = System.IO.File.Exists(fileName.ToString());
      if (ok)
      {
      number++;
      }
     }
     if (number.Equals(files.Count))
     {
      check.Message = "上传成功!";
      check.Check = true;
     }
     else
     {
      check.Message = "失败!";
      check.Check = false;
     }
     return Json(check);
     }
     catch(Exception ex)
     {
     check.Message = ex.ToString();
     check.Check = false;
     return Json(check);
     }
    }
    /// <summary>
    /// 返回值
    /// </summary>
    public class Result<T>
    {
    public string Message { get; set; }
    public bool Check { get; set; }
    public IList<T> ResultList { get; set; }
    }

    其中用到了ImageHelper.ZoomAuto(),这个是吴剑大哥写的图片处理类,地址http://www.cnblogs.com/wu-jian/archive/2011/02/21/1959382.html。最后还有一个坑,就是asp.net对一次上传数据的大小是有限制的,要解除限制才能10个20个文件同时上传。如何解除限制?在web.config里面配置一下就OK了。代码如下:

    <system.web>
     <authentication mode="None" />
     <compilation debug="true" targetFramework="4.5" />
     <!--<httpRuntime targetFramework="4.5" />-->
     <httpRuntime executionTimeout="500" maxRequestLength="409600" useFullyQualifiedRedirectUrl="false" minFreeThreads="8" minLocalRequestFreeThreads="4" appRequestQueueLimit="100" />
     </system.web>

    把<httpRuntime >放<system.web>节点下。

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持未来软件园。