MVC3+Html5+jquery_easyui做上传文件,带进度条

为了方便,进度条使用的是jquery 的 easy ui, 网上有下载.需要引用easy ui的样式以及脚本文件

如果不采用这样的进度条,也可以修改上传的Js以后自己做进度条.

 

 

 

  1 <script language="javascript" type="text/javascript">
  2 
  3     function fileSelected() {
  4         var file = document.getElementById('fileToUpload').files[0];
  5         var fileName = file.name;
  6         var file_typename = fileName.substring(fileName.lastIndexOf('.'), fileName.length);
  7     
  8         if (file_typename == '.xls') {//这里限定上传文件文件类型
  9             if (file) {
 10 
 11                 $("#uploadFile").show();
 12                 var fileSize = 0;
 13                 if (file.size > 1024 * 1024)
 14                     fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString() + 'MB';
 15                 else
 16                     fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + 'KB';
 17 
 18                 document.getElementById('fileName').innerHTML = '文件名: ' + file.name;
 19                 document.getElementById('fileSize').innerHTML = '大小: ' + fileSize;
 20                 document.getElementById('fileType').innerHTML = '类型: ' + file.type;
 21 
 22 
 23             }
 24 
 25         }
 26         else {
 27 
 28             $("#uploadFile").hide();
 29             document.getElementById('fileName').innerHTML = "<span style='color:Red'>错误提示:上传文件应该是.xls后缀而不应该是" + file_typename + ",请重新选择文件</span>"
 30             document.getElementById('fileSize').innerHTML ="";
 31             document.getElementById('fileType').innerHTML ="";
 32 
 33         }
 34     }
 35 
 36     function uploadFile() {
 37         var fd = new FormData();
 38         fd.append("fileToUpload", document.getElementById('fileToUpload').files[0]);
 39         var xhr = new XMLHttpRequest();
 40         xhr.upload.addEventListener("progress", uploadProgress, false);
 41         xhr.addEventListener("load", uploadComplete, false);
 42         xhr.addEventListener("error", uploadFailed, false);
 43         xhr.addEventListener("abort", uploadCanceled, false);
 44         xhr.open("POST", "/Goods/ToLead");
 45         xhr.send(fd);
 46     }
 47 
 48     function uploadProgress(evt) {
 49         if (evt.lengthComputable) {
 50             var percentComplete = Math.round(evt.loaded * 100 / evt.total);
 51             $('#progressNumber').progressbar('setValue', percentComplete);
 52         }
 53         else {
 54             document.getElementById('progressNumber').innerHTML = '无法计算';
 55         }
 56     }
 57 
 58     function uploadComplete(evt) {
 59         /* 服务器返回数据*/
 60         var message = evt.target.responseText;
 61       
 62     }
 63 
 64     function uploadFailed(evt) {
 65         alert("上传出错.");
 66     }
 67 
 68     function uploadCanceled(evt) {
 69         alert("上传已由用户或浏览器取消删除连接.");
 70     }
 71 </script>
 72 <div data-options="region:'center',title:'货品管理',iconCls:'icon-ok'">
 73     <div style="margin: 70px;">
 74       
 75         <div id="#DivUp">
 76        
 77             @using (Html.BeginForm("ToLead", "Goods", FormMethod.Post, new { enctype = "multipart/form-data", id = "form1" }))
 78             {    
 79                 <div class="row">
 80                     <label for="file">
 81                         <h5>
 82                             文件上传:</h5>
 83                     </label>
 84                     <input type="file" name="fileToUpload" id="fileToUpload" multiple="multiple" onchange="fileSelected();" />
 85                     <a id="uploadFile" style=" display:none" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-save'" onclick="uploadFile()">
 86                         上传并导入</a>
 87                 </div>
 88         
 89                 <div id="fileName" style="padding: 10px">
 90                 </div>
 91                 <div id="fileSize" style="padding: 10px">
 92                 </div>
 93                 <div id="fileType" style="padding: 10px">
 94                 </div> 
 95              
 96                 <div id="progressNumber" class="easyui-progressbar" style="width: 400px;">
 97                 </div>
 98             }
 99         </div>
100     </div>
101 
102 </div>

 

 1         /// <summary>
 2         /// 上传文件
 3         /// </summary>
 4         /// <param name="fileToUpload"></param>
 5         /// <returns></returns>
 6         [HttpPost]
 7         [ValidateInput(false)]
 8         public string ToLead(HttpPostedFileBase[] fileToUpload)
 9         {
10             try
11             {
12                 string FileUrl = string.Empty;
13                 foreach (HttpPostedFileBase file in fileToUpload)
14                 {
15                     string path = System.IO.Path.Combine(Server.MapPath("~/FileUpLoad/Goods"), System.IO.Path.GetFileName(file.FileName));
16                     file.SaveAs(path);
17                     FileUrl = path;
18                 }
19 
20                 
21                 return "上传成功";
22             }
23 
24             catch {
25 
26                 return "上传失败";
27             }
28 
29         }

posted @ 2013-08-27 17:30  luosuo  阅读(35590)  评论(7编辑  收藏  举报