2012年2月1日 星期三

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');
        }
    });

    頁面顯示錯誤訊息:

    image

    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 pairs
    params: 
    {
        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的資料也會接收到前端所設定的參數資料內容:

    image

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


    上傳時的事件處理

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

  • onSubmit
  • onProgress
  • onComplete
  • onCancel

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

    onSubmit: function(id, fileName){},

     

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

    image

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

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

    image


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

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

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

    image

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

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

    image


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

    image

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

    image



    上傳完成時的事件處理


    上傳完成時所對應使用的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
                    });
                }
            });
        }
    },

     

    應用jQuery.EasyUI Messager來做上傳成功或是上傳失敗的訊息顯示。

    上傳成功:

    image

    上傳出現錯誤:先以Messager.alert方式提示有檔案上傳錯誤

    image

    再以Messager.Show方式顯示傳回的錯誤訊息內容

    image



    在兩篇有關valums file-uploader進階操作的文章中說明了以下這些內容:

  • 自定上傳檔案區塊的文字、上傳檔案清單的文字
  • 限制檔案的上傳大小
  • 限制上傳檔案的種類
  • 修改訊息內容
  • 更改出現訊息的方式
  • 上傳時也同時傳送其他參數資料
  • 上傳時、上傳完成時的事件處理

    並沒有全部詳盡說明有關valums file-uploader的操作,但透過這些內容的說明也希望能夠給大家一點想法,能夠知道可以如何靈活的應用。

     

    參考連結:

    valums file-uploader Wiki
    https://github.com/valums/file-uploader/wiki


    valums file-uploader ASP.NET MVC Sample Code
    https://github.com/valums/file-uploader/wiki/ASP.NET-MVC



     

    以上

  • 2 則留言:

    1. 說的很清楚,解決了我遇到的一個問題,太感謝了!

      回覆刪除

    提醒

    千萬不要使用 Google Talk (Hangouts) 或 Facebook 及時通訊與我聯繫、提問,因為會掉訊息甚至我是過了好幾天之後才發現到你曾經傳給我訊息過,請多多使用「詢問與建議」(在左邊,就在左邊),另外比較深入的問題討論,或是有牽涉到你實作程式碼的內容,不適合在留言板裡留言討論,請務必使用「詢問與建議」功能(可以夾帶檔案),謝謝。