使用fineuploader調用WebApi上傳附件

fineuploader是一個國外的很不錯的文件上傳JS控件，之前是免費的，現在到官網下載需要收費的。我從網上找了3.3.1的舊版本，對於普通上傳文件不會有太大影響。

官網：http://fineuploader.com/ 可以看看API文檔。

1.前台HTML代碼

<script src="~/Scripts/jquery-1.8.2.js"></script>
<link href="~/Content/js/uploader/fineuploader-3.3.1.css" rel="stylesheet" />
<script src="~/Content/js/uploader/fineuploader-3.3.1.min.js"></script>
<script src="~/Scripts/json2.min.js"></script>
<script type="text/javascript">
    function createUploader() {
        var uploader = new qq.FineUploader({
            element: document.getElementById('fine-uploader'),
            request: {
                endpoint: '/api/Uploader/',
                params: {
                    Name: "johnson",
                    Price: "200"
                }
            },
            text: {
                uploadButton: '選擇上傳文件' //上傳按鈕的文字
            },
            multiple: false, //是否為多文件上傳
            validation: {
                allowedExtensions: ['txt', 'xlsx', 'doc'], //限制上傳格式 
                sizeLimit: 1024 * 1024 * 1024 * 1024 * 1024 //限制上傳大小 
            },
            autoUpload: false, //是否自動提交 
            editFilename: { //編輯名字 
                enable: false
            },
            showMessage: function (message) {
                // Using Bootstrap's classes
                //$('#fine-uploader').append('<div class="alert alert-error">' + message + '</div>');
                alert("格式不正確!");
            },
            callbacks: {
                onComplete: function (id, fileName, responseJSON) {
                    debugger;
                    if (responseJSON.success) {
                        alert(responseJSON.error);
                    }
                    else {
                        alert("Failed:" + responseJSON.error);
                    }

                }
            },
            debug: true
        });

        document.getElementById('triggerUpload').onclick = function () {
            uploader.uploadStoredFiles();
        };
    }
    
    window.onload = createUploader;
</script>

<!-- Fine Uploader CSS
====================================================================== -->
<link href="assets/fineuploader.css" rel="stylesheet">

<!-- Fine Uploader DOM Element
====================================================================== -->
<div id="fine-uploader"></div>
<button id="triggerUpload" style="margin-top: 10px;">
        Upload now
    </button>

<!-- Fine Uploader template
====================================================================== -->
<script type="text/template" id="qq-template">
  <div class="qq-uploader-selector qq-uploader">
    <div class="qq-upload-drop-area-selector qq-upload-drop-area" qq-hide-dropzone>
      <span>Drop files here to upload</span>
    </div>
    <div class="qq-upload-button-selector qq-upload-button">
      <div>Upload a file</div>
    </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">
      <li>
        <div class="qq-progress-bar-container-selector">
          <div class="qq-progress-bar-selector qq-progress-bar"></div>
        </div>
        <span class="qq-upload-spinner-selector qq-upload-spinner"></span>
        <span class="qq-edit-filename-icon-selector qq-edit-filename-icon"></span>
        <span class="qq-upload-file-selector qq-upload-file"></span>
        <input class="qq-edit-filename-selector qq-edit-filename" tabindex="0" type="text">
        <span class="qq-upload-size-selector qq-upload-size"></span>
        <a class="qq-upload-cancel-selector qq-upload-cancel" href="#">Cancel</a>
        <a class="qq-upload-retry-selector qq-upload-retry" href="#">Retry</a>
        <a class="qq-upload-delete-selector qq-upload-delete" href="#">Delete</a>
        <span class="qq-upload-status-text-selector qq-upload-status-text"></span>
      </li>
    </ul>
  </div>
</script>

2.后台C#代碼

namespace UploadTest.Controllers
{
    public class UploaderController : ApiController
    {
        [System.Web.Http.HttpPost]
        public async Task<HttpResponseMessage> PostFormData()
        {
            // Check if the request contains multipart/form-data.
            // 檢查該請求是否含有multipart/form-data
            if (!Request.Content.IsMimeMultipartContent())
            {
                throw new HttpResponseException(HttpStatusCode.UnsupportedMediaType);
            }
            string root = HttpContext.Current.Server.MapPath("~/App_Data");
            var provider = new MultipartFormDataStreamProvider(root);
            try
            {
                // Read the form data.
                // 讀取表單數據
                await Request.Content.ReadAsMultipartAsync(provider);
                //獲取傳參
                string name = provider.FormData["Name"];
                int price = int.Parse(provider.FormData["Price"]);
                // This illustrates how to get the file names.
                // 以下描述如何獲取文件名
                foreach (MultipartFileData file in provider.FileData)
                {
                    Trace.WriteLine(file.Headers.ContentDisposition.FileName);
                    Trace.WriteLine("Server file path: " + file.LocalFileName);
                }
                var resp = new HttpResponseMessage { Content = new StringContent("{\"success\":true,\"error\":\"文件過大！\"}", System.Text.Encoding.UTF8, "text/html") };
                return resp;
            }
            catch (System.Exception e)
            {
                return Request.CreateErrorResponse(HttpStatusCode.InternalServerError, e);
            }
        }
    }
}

3.測試結果