代码改变世界

uploadifive上传文件

2017-02-08 22:36  sunice  阅读(3571)  评论(0)  编辑  收藏  举报

uploadifive是一个款基于H5的上传文件的插件。优点是，可以在PC端，也可以在手机上进行操作。缺点是，IE9以下的兼容性不好。

View：

 1 <!DOCTYPE html>
 2 
 3 <html>
 4 <head>
 5     <meta name="viewport" content="width=device-width" />
 6     <title>Index</title>
 7     <script src="~/Scripts/jquery-1.10.2.min.js"></script>
 8     <script src="~/Content/uploadifive/jquery.uploadifive.min.js"></script>
 9     <link href="~/Content/uploadifive/uploadifive.css" rel="stylesheet" />
10 </head>
11 <body>
12     <div id="queue"></div>
13     <input type="file" id="file_upload" name="file_upload" />
14 
15     <script>
16         $(function () {
17             $('#file_upload').uploadifive({
18                 'auto': true,
19                 'queueID': 'queue',
20                 'buttonText': '上传文件',
21                 'uploadScript': '/File/UploadFile',
22                 'onUploadComplete': function (file, data) {
23                     if (data) {
24                         alert('上传成功')
25                     } else {
26                         alert('上传失败' + rspdesc);
27                     }
28                 }
29             });
30         });
31     </script>
32 </body>
33 </html>

Controller

 1  /// <summary>
 2  /// 上传文件
 3  /// </summary>
 4  public ActionResult UploadFile(HttpPostedFileBase fileData)
 5  {
 6      if (fileData.ContentLength > 0)
 7      {
 8          string fileExt = Path.GetExtension(fileData.FileName);
 9          string fileName = DateTime.Now.ToString("yyyyMMdd_HHmmssff") + fileExt;
10          string savePath = Server.MapPath("~/Upload/"+ fileName);
11          fileData.SaveAs(savePath);
12          return Content("ok");
13      }
14      else
15      {
16          return null;
17      }
18  }