mrkt 的程式學習筆記: ASP.NET MVC上傳檔案,使用file-uploader : 進階操作 Part.2

繼續進行 valums file-uploader 的進階操作說明，這一篇文章將會說明以下的內容：

更改出現訊息的方式

上傳時也同時傳送其他參數資料

上傳時、上傳完成時的事件處理

更改出現訊息的方式

valums file-uploader的訊息顯示是用最基本的javascript alert()方式，

showMessage: function(message){    alert(message);}    

如果說要更改訊息的顯示方式，就可以從這一個option中去做修改，
例如說使用「jQuery EasyUI – Messager」來顯示錯誤訊息，

var uploader = new qq.FileUploader({    element: $('#file-uploader')[0],    action: '@Url.Action("BasicUpload", "Home")',    sizeLimit: 0.8 * 1024 * 1024,    minSizeLimit: 0.6 * 1024 * 1024,    allowedExtensions: ["jpg", "jpeg", "png", "gif"],    messages:    {        typeError: "{file} 檔案類型錯誤. 只允許上傳以下副檔名的檔案：\r\n{extensions}.",        sizeError: "{file} 超過檔案大小最大限制, 最大檔案大小為 {sizeLimit}.",        minSizeError: "{file} 小於檔案大小最低限制, 最低檔案大小為 {minSizeLimit}.",        emptyError: "{file} is empty, please select files again without it.",        onLeave: "The files are being uploaded, if you leave now the upload will be cancelled."    },    showMessage: function (message)    {        $.messager.alert('錯誤', message, 'error');    }});

頁面顯示錯誤訊息：

jQuery EasyUI

網站：http://www.jeasyui.com/index.php

jQuery EasyUI Messager：http://www.jeasyui.com/documentation/messager.php

jQuery EasyUI Messager Document：http://www.jeasyui.com/documentation/messager.php

顯示訊息的jQuery 套件有相當多，例如「jAlert」也是相當不錯的訊息顯示套件，

使用jQuery EsayUI Messager是因為它還可以讓我們去設定CallBack事件，彈性應用是我選用它的原因之一，

jQuery EasyUI也還有相當多種的Plugins可供整合使用，使用上也相當簡易，推薦給大家參考。

上傳時也同時傳送其他參數資料

valums file-uploader有個option「params」可以讓我們處理這樣的操作，

// additional data to send, name-value pairsparams: {    param1: 'value1',    param2: 'value2'}

例如說我們要在檔案上傳的同時也傳送一個字串到後端，我們可以做以下的設定：

var uploader = new qq.FileUploader({    element: $('#file-uploader')[0],    action: '@Url.Action("AdvanceUpload4", "Home")',    sizeLimit: 1 * 1024 * 1024,    minSizeLimit: 0.1 * 1024 * 1024,    allowedExtensions: ["jpg", "jpeg", "png", "gif"],    params: { description: 'test content' },    messages:    {        typeError: "{file} 檔案類型錯誤. 只允許上傳以下副檔名的檔案：\r\n{extensions}.",        sizeError: "{file} 超過檔案大小最大限制, 最大檔案大小為 {sizeLimit}.",        minSizeError: "{file} 小於檔案大小最低限制, 最低檔案大小為 {minSizeLimit}.",        emptyError: "{file} is empty, please select files again without it.",        onLeave: "The files are being uploaded, if you leave now the upload will be cancelled."    },    showMessage: function (message)    {        $.messager.alert('錯誤', message, 'error');    }});

而後端接收到前端POST的資料也會接收到前端所設定的參數資料內容：

那如果不想要在前端程式中去固定參數的資料，而是想要傳送一個輸入的字串資料呢？下一段就跟你說怎麼做。

上傳時的事件處理

file-uploader的options中有關事件處理的有四個：

onSubmit

onProgress

onComplete

onCancel

而上傳時的事件處理就要使用「onSubmit」

onSubmit: function(id, fileName){},

像前一段最後所說的，假如我們要傳送一個畫面上輸入的字串資料時，

如果是直接在params中去取值，傳送到後端時，

後端是無法取得資料的，前端頁面上有個id為description的Text輸入框，

參數資料內容為取用description的資料

params: { description: $('#description').val() },

但是當資料傳送到後端時，後端是無法取得資料

所以我們必須要在onSubmit事件處理去取得description的資料內容，如此前端才能將資料傳送到後端，

params: { description: '' },onSubmit: function(id, fileName){    this.params.description = $.trim($('#description').val());},

執行時，用firebug下中斷點去觀察是否資料有無正確取得

觀察後端，已經可以正確的取得前端所傳送的資料

上傳完成時的事件處理

上傳完成時所對應使用的option為「onComplete」

onComplete: function(id, fileName, responseJSON){},

因為是處理上傳完成後的事件處理，所以會對後端傳回到前端的訊息去做判斷，

所以當「responseJSON.success == true」時，就是上傳成功，

而當「responseJSON.success == false」時，就是上傳出現錯誤而接下來就是處理錯誤訊息的顯示或是其他處理，

而我這邊的處理如下：

onComplete: function (id, fileName, responseJSON){    if (responseJSON.success)    {        $.messager.alert('訊息', fileName + " 檔案上傳完成!", 'info');    }    else    {        $.messager.alert('錯誤', '檔案上傳錯誤', 'error', function ()        {            if (responseJSON.message)            {                $.messager.show({                    showType: 'show',                    title: '錯誤訊息內容',                    msg: responseJSON.message,                    timeout: 0,                    width: 600,                    height: 200                });            }        });    }},