上传组件Fine Uploader在ASP.NET中的应用

现如今，世面上流行着许多前端上传组件，例如：Uploadify（http://www.uploadify.com/），Fine Uploader,等等。这篇博客从头开始，介绍如何在ASP.NET MVC中使用Fine Uploader。

 

Fine Uploader官网：https://fineuploader.com/demos.html

 

代码结果如下图所示，可以选择本地文件之后点击上传，文件会被传输到服务器根目录下的Upload文件夹中（文件夹的名称是代码中定义的）。

 

 

Step By Step Process:

 

1. 在官网的下载页面下载Fine Uploader压缩包。https://fineuploader.com/customize.html

 

2. 新建MVC工程并将刚刚下载之后的解压文件夹添加到项目中。

 

3.在Models中添加类文件 FineUpload.cs 和 FineUploadResult.cs，Controller中添加UploaderController。

（这里参考了Github上的Server样例 https://github.com/FineUploader/server-examples，至于这两个类文件是否应该放在Models文件夹下有待商榷。）

 

 using System.IO;
 using System.Web.Mvc;

 namespace FineUploaderTest.Web.Model
 {
     [ModelBinder(typeof(ModelBinder))]
     public class FineUpload
     {
         public string Filename { get; set; }
         public Stream InputStream { get; set; }

         public void SaveAs(string destination, bool overwrite = false, bool autoCreateDirectory = true)
         {
             if (autoCreateDirectory)
             {
                 var directory = new FileInfo(destination).Directory;
                 if (directory != null) directory.Create();
             }

             using (var file = new FileStream(destination, overwrite ? FileMode.Create : FileMode.CreateNew))
                 InputStream.CopyTo(file);
         }

         public class ModelBinder : IModelBinder
         {
             public object BindModel(ControllerContext controllerContext, ModelBindingContext bindingContext)
             {
                 var request = controllerContext.RequestContext.HttpContext.Request;
                 var formUpload = request.Files.Count > ;

                 // find filename
                 var xFileName = request.Headers["X-File-Name"];
                 var qqFile = request["qqfile"];
                 var formFilename = formUpload ? request.Files[].FileName : null;

                 var upload = new FineUpload
                 {
                     Filename = xFileName ?? qqFile ?? formFilename,
                     InputStream = formUpload ? request.Files[].InputStream : request.InputStream
                 };

                 return upload;
             }
         }

     }
 }

FineUpload.cs

 using System.Web.Mvc;
 using Newtonsoft.Json.Linq;

 namespace FineUploaderTest.Web.Model
 {
     /// <remarks>
     /// Docs at https://github.com/Widen/fine-uploader/blob/master/server/readme.md
     /// </remarks>
     public class FineUploaderResult : ActionResult
     {
         public const string ResponseContentType = "text/plain";

         private readonly bool _success;
         private readonly string _error;
         private readonly bool? _preventRetry;
         private readonly JObject _otherData;

         public FineUploaderResult(bool success, object otherData = null, string error = null, bool? preventRetry = null)
         {
             _success = success;
             _error = error;
             _preventRetry = preventRetry;

             if (otherData != null)
                 _otherData = JObject.FromObject(otherData);
         }

         public override void ExecuteResult(ControllerContext context)
         {
             var response = context.HttpContext.Response;
             response.ContentType = ResponseContentType;

             response.Write(BuildResponse());
         }

         public string BuildResponse()
         {
             var response = _otherData ?? new JObject();
             response["success"] = _success;

             if (!string.IsNullOrWhiteSpace(_error))
                 response["error"] = _error;

             if (_preventRetry.HasValue)
                 response["preventRetry"] = _preventRetry.Value;

             return response.ToString();
         }
     }
 }

FineUploadResult.cs

 using FineUploaderTest.Web.Model;
 using System;
 using System.Collections.Generic;
 using System.IO;
 using System.Linq;
 using System.Web;
 using System.Web.Mvc;

 namespace FineUploaderTest.Web.Controllers
 {
     public class UploaderController : Controller
     {
         // GET: Uploader
         public ActionResult Index()
         {
             return View();
         }

         [HttpPost]
         public FineUploaderResult UploadFile(FineUpload upload)
         {
             var dir = Server.MapPath("~/Upload");
             int pos1 = upload.Filename.LastIndexOf("\\");
             string fileName = pos1 == - ? upload.Filename : upload.Filename.Substring(pos1 + , upload.Filename.Length - pos1 - );
             string storeName = Guid.NewGuid() + fileName;
             var filePath = Path.Combine(dir, storeName);
             try
             {
                 upload.SaveAs(filePath);
                 ViewBag.SourcePath = filePath;
             }
             catch (Exception ex)
             {
                 return new FineUploaderResult(false, error: ex.Message);
             }
             // the anonymous object in the result below will be convert to json and set back to the browser
             return new FineUploaderResult(true, new { extraInformation = filePath });
         }
     }
 }

UploaderController.cs

添加代码之后的文件夹结构：

 

4. 重写Home文件夹下的Index.cshtml页面

 

 @{
     ViewBag.Title = "Test Fine Upload";
 }

 <h3>Test Fine Upload</h3>

 <link href="~/fine-uploader/fine-uploader-new.css" rel="stylesheet" />

 <style>
     #trigger-upload {
         color: white;
         background-color: #00ABC7;
         font-size: 14px;
         padding: 7px 20px;
         background-image: none;
     }

     #Query {
         color: white;
         background-color: #00ABC7;
         font-size: 14px;
         padding: 7px 20px;
         background-image: none;
     }

     #fine-uploader-manual-trigger .qq-upload-button {
         margin-right: 15px;
     }

     #fine-uploader-manual-trigger .buttons {
         width: 36%;
     }

     #fine-uploader-manual-trigger .qq-uploader .qq-total-progress-bar-container {
         width: 60%;
     }
 </style>

 <div id="fine-uploader-manual-trigger"></div>
 <div id="BeginQuery" style="margin-top:30px;">
     <p><a id="Query" class="btn btn-default">Test File Name</a></p>
 </div>

 </br>
 <div class="panel panel-default">
     <div class="panel-heading">
         <h3 class="panel-title">注意事项</h3>
     </div>
     <div class="panel-body">
         <ul>
             <li>文件最大支持<strong>20M</strong></li>
             <li>Some other info.</li>
         </ul>
     </div>
 </div>

 @section Scripts {
     <script src="~/fine-uploader/jquery.fine-uploader.js"></script>
     <!-- Fine Uploader Thumbnails template w/ customization
     ====================================================================== -->
     <script type="text/template" id="qq-template-manual-trigger">
         <div class="qq-uploader-selector qq-uploader" qq-drop-area-text="Drop files here">
             <div class="qq-total-progress-bar-container-selector qq-total-progress-bar-container">
                 <div role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" class="qq-total-progress-bar-selector qq-progress-bar qq-total-progress-bar"></div>
             </div>
             <div class="qq-upload-drop-area-selector qq-upload-drop-area" qq-hide-dropzone>
                 <span class="qq-upload-drop-area-text-selector"></span>
             </div>
             <div class="buttons">
                 <div class="qq-upload-button-selector qq-upload-button">
                     <div>选择文件</div>
                 </div>
                 <button type="button" id="trigger-upload" class="btn btn-primary">
                     <i class="icon-upload icon-white"></i> 上传
                 </button>
             </div>
             <span class="qq-drop-processing-selector qq-drop-processing">
                 <span>Processing dropped files...</span>
                 <span class="qq-drop-processing-spinner-selector qq-drop-processing-spinner"></span>
             </span>
             <ul class="qq-upload-list-selector qq-upload-list" aria-live="polite" aria-relevant="additions removals">
                 <li>
                     <div class="qq-progress-bar-container-selector">
                         <div role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" class="qq-progress-bar-selector qq-progress-bar"></div>
                     </div>
                     <span class="qq-upload-spinner-selector qq-upload-spinner"></span>
                     <img class="qq-thumbnail-selector" qq-max-size="100" qq-server-scale>
                     <span class="qq-upload-file-selector qq-upload-file"></span>
                     <span class="qq-edit-filename-icon-selector qq-edit-filename-icon" aria-label="Edit filename"></span>
                     <input class="qq-edit-filename-selector qq-edit-filename" tabindex="0" type="text">
                     <span class="qq-upload-size-selector qq-upload-size"></span>
                     <button type="button" class="qq-btn qq-upload-cancel-selector qq-upload-cancel">Cancel</button>
                     <button type="button" class="qq-btn qq-upload-retry-selector qq-upload-retry">Retry</button>
                     <button type="button" class="qq-btn qq-upload-delete-selector qq-upload-delete">Delete</button>
                     <span role="status" class="qq-upload-status-text-selector qq-upload-status-text"></span>
                 </li>
             </ul>

             <dialog class="qq-alert-dialog-selector">
                 <div class="qq-dialog-message-selector"></div>
                 <div class="qq-dialog-buttons">
                     <button type="button" class="qq-cancel-button-selector">Close</button>
                 </div>
             </dialog>

             <dialog class="qq-confirm-dialog-selector">
                 <div class="qq-dialog-message-selector"></div>
                 <div class="qq-dialog-buttons">
                     <button type="button" class="qq-cancel-button-selector">No</button>
                     <button type="button" class="qq-ok-button-selector">Yes</button>
                 </div>
             </dialog>

             <dialog class="qq-prompt-dialog-selector">
                 <div class="qq-dialog-message-selector"></div>
                 <input type="text">
                 <div class="qq-dialog-buttons">
                     <button type="button" class="qq-cancel-button-selector">Cancel</button>
                     <button type="button" class="qq-ok-button-selector">Ok</button>
                 </div>
             </dialog>
         </div>
     </script>
     <script>
         var filePath;
         $('#fine-uploader-manual-trigger').fineUploader({
             template: 'qq-template-manual-trigger',
             request: {
                 endpoint: '/Uploader/UploadFile'
             },
             thumbnails: {
                 placeholders: {
                     waitingPath: '/source/placeholders/waiting-generic.png',
                     notAvailablePath: '/source/placeholders/not_available-generic.png'
                 }
             },
             autoUpload: false,
             deleteFile: {
                 enabled: false, // if want to delete, make this true
                 forceConfirm: true,
                 endpoint: '/Home/DeleteFile'
             },
             validation: {
                 allowedExtensions: ['txt', 'csv'],
                 itemLimit: 1,
                 sizeLimit: 51200000 // 50 kB = 50 * 1024 bytes
             },
             callbacks: {
                 onComplete: function (id, fileName, responseJSON) {
                     filePath = responseJSON.extraInformation;
                 }
             }
         });

         $('#trigger-upload').click(function () {
             $('#fine-uploader-manual-trigger').fineUploader('uploadStoredFiles');
         });

         $('#Query').click(function () {
             alert(filePath);
         });
     </script>
 }

Index.cshtml

源代码下载