ajaxfileupload.js 實作異步上傳圖檔

使用Jquery做上傳檔案處理時，用到了ajaxfileupload.js 這個第三方代碼，但是在使用過程中出現了一些問題，現在整理了一下，并加修改後的ajaxfileupload.js上傳，供大家參考。

問題一：

    無法攜帶參數，隻能送出檔案。

解決辦法：

    找到檔案中createUploadForm: function(id, fileElementId) 方法添加一個data參數，并将data中的資料拼接進去即可。代碼如下：

 createUploadForm: function(id, fileElementId, data)

 {

  //create form 

  var formId = 'jUploadForm' + id;

  var fileId = 'jUploadFile' + id;

  var form = jQuery('<form  action="" method="POST" name="' + formId + '" id="' + formId + '" enctype="multipart/form-data"></form>'); 

  var oldElement = jQuery('#' + fileElementId);

  var newElement = jQuery(oldElement).clone();

  jQuery(oldElement).attr('id', fileId);

  jQuery(oldElement).before(newElement);

  jQuery(oldElement).appendTo(form);

  if (data) {

      for (var i in data) {

          $('<input type="hidden" name="' + i + '" value="' + data[i] + '" />').appendTo(form);

      }

  }

然後找到調用createUploadForm方法的地方，修改入參：

ajaxFileUpload: function(s) {

        // TODO introduce global settings, allowing the client to modify them for all requests, not only timeout  

        s = jQuery.extend({}, jQuery.ajaxSettings, s);

        var id = s.fileElementId;        

  var form = jQuery.createUploadForm(id, s.fileElementId, s.data);

  var io = jQuery.createUploadIframe(id, s.secureuri);

  var frameId = 'jUploadFrame' + id;

  var formId = 'jUploadForm' + id;  

現在參數問題就解決了，這個時候，你可以傳入你需要的參數。

問題二：

    運作時報：jQuery.handleError is not a function 錯誤；

    這個錯誤是由于ajaxfileupload.js 是在jquery1.4.2版本之前寫的，Jquery之後的版本已經沒有了handleError 方法，是以可以将1.4.2版本中的該方法複制到該js中。

// handleError 方法在jquery1.4.2之後移除了，此處重寫改方法

    handleError: function( s, xhr, status, e ) {

        // If a local callback was specified, fire it

        if ( s.error ) {

            s.error.call( s.context || s, xhr, status, e );

        }

        // Fire the global callback

        if ( s.global ) {

            (s.context ? jQuery(s.context) : jQuery.event).trigger( "ajaxError", [xhr, s, e] );

    },

問題三：

    執行完成後，如果傳回結果為json格式，則不斷報錯，這個問題是由于在處理傳回的data的時候，對json格式的資料處理不當導緻，這個時候修改uploadHttpData方法即可：

uploadHttpData: function( r, type ) {

        var data = !type;

        data = type == "xml" || data ? r.responseXML : r.responseText;

        // ifthe type is "script", eval it in global context

        if( type == "script" )

        {

         jQuery.globalEval( data );

        // Get the JavaScript object, ifJSON is used.

        if( type == "json" )

        data = jQuery.parseJSON(jQuery(data).text());

//         eval( "data = " + data );

        // evaluate scripts within html

        if( type == "html" )

         jQuery("<div>").html(data).evalScripts();

        return data;

    }

現在可以實作異步上傳圖檔了。

我的js代碼：

$("#p_w_picpathInput").change(function(){

var filename = $("#p_w_picpathInput").val();

if(!/\.(gif|jpg|jpeg|png|GIF|JPG|PNG)$/.test(filename)){

alert("You must select a valid p_w_picpath file!");

return false;

}

$.ajaxFileUpload({  

            url: '/web/account!modifyLogoimg.action',  

            secureuri: false,  

            fileElementId: 'p_w_picpathInput',  

            dataType: 'json',

            data : {"filename": filename},

            success: function(data) {  

            if(data.success){

$("#personal_img").attr("src", "/"+data.picpath);

$("#filename_hide").val(data.picpath);

}else{

alert(data.message);

} 

            },  

            error: function(data, status, e) {  

                alert(e);  

            }  

        });

});

html片段：

<form action="" method="post" enctype="multipart/form-data" id="p_w_picpath_form" >

     <dl>

        <dt>The current p_w_picpath:</dt>

        <dd id="p_w_picpathPreview">

        <img id="personal_img" src="" />

        <input type="hidden" value="" name="filename" id="filename_hide">

        </dd>

     </dl>

        <dt>New p_w_picpath:</dt>

        <dd><a href="javascript:void(0);"><input type="file" name="picture" id="p_w_picpathInput" /></a></dd>