[转]Asp.NET MVC3 + Ajax 实现多文件上传

本文转自：http://hi.baidu.com/softworm/item/ed0aa753df00373094eb05cf

HTML

< form id = "form1" name = "form1" >
        < input type = "file" name = "fileToUpload" id = "fileToUpload"  multiple = "multiple"  />
        < progress id = "progressBar" value = "0" max = "100" ></ progress >
        < span id = "percentage" ></ span >
        < input type = "button" onclick = "UpladFile()" value = "Upload" />
</ form >

JS

<script type= "text/javascript" >
   function UpladFile() {
       // js 获取文件对象
       var fileObj = document.getElementById( "fileToUpload2" ).files;
       // 接收上传文件的后台地址
       var FileController = "/Home/Upload" ;

       // FormData 对象
       var form = new FormData();
       // 可以增加表单数据
       form.append( "author" , "hooyes" );
       // 文件对象
       for ( var i = 0; i < fileObj.length; i++)
           form.append( "file" + i, fileObj[i]);

       // XMLHttpRequest 对象
       var xhr = new XMLHttpRequest();
       xhr.open( "post" , FileController, true );
       xhr.onload = function () {
           alert( "上传完成!" );
       };
       xhr.upload.addEventListener( "progress" , progressFunction, false );
       xhr.send(form);
   }

   function progressFunction(evt) {
       var progressBar = document.getElementById( "progressBar" );
       var percentageDiv = document.getElementById( "percentage" );
       if (evt.lengthComputable) {
           progressBar.max = evt.total;
           progressBar.value = evt.loaded;
           percentageDiv.innerHTML = Math.round(evt.loaded / evt.total * 100) + "%" ;
       }
   }
  </script>

C#

[HttpPost]
       public ActionResult Upload()
       {
           HttpFileCollectionBase fileToUpload = Request.Files;
           foreach ( string file in fileToUpload)
           {
               var curFile = Request.Files[file];
               if (curFile.ContentLength < 1) continue ;
               string path = System.IO.Path.Combine(Server.MapPath( "~/Upload" ), System.IO.Path.GetFileName(curFile.FileName));
               curFile.SaveAs(path);
           }
           return RedirectToAction( "Index" );
       }

jQuery

<script type= "text/javascript" >
   $(document).ready( function () {
       $( '#form1' ).submit( function () {
           var formdata = new FormData();
           var fileObj = document.getElementById( "fileToUpload2" ).files;
           for ( var i = 0; i < fileObj.length; i++)
               formdata.append( "file" + i, fileObj[i]);
           $.ajax({
               type: 'POST' ,
               url: '/Home/Upload2' ,
               data: formdata,
               /**
               *必须false才会自动加上正确的Content-Type
               */
               contentType: false ,
               /**
               * 必须false才会避开jQuery对 formdata 的默认处理
               * XMLHttpRequest会对 formdata 进行正确的处理
               */
               processData: false
           }).then( function () {
               alert( 'done' );
           }, function () {
               //failCal
           });
           return false ;
       });
       $( "#btn" ).bind( "click" , ajaxUpload);
   });

   function ajaxUpload() {
       $( "#form1" ).submit();
   }
</script>