jquery外掛程式--ajaxfileupload.js上傳檔案原理分析，jquery.more.js外掛程式

jquery外掛程式--ajaxfileupload.js上傳檔案原理分析，jquery.more.js外掛程式
英文註解應該是原作者寫的吧~說實話，有些if判斷裡的東西我也沒太弄明白，但是大致思路還是OK的。

jQuery.extend({    createUploadIframe: function (id, uri) {//id為當前系統時間字串，uri是外部傳入的json對象的一個參數        //create frame        var frameId = 'jUploadFrame' + id; //給iframe添加一個獨一無二的id        var iframeHtml = '<iframe id="' + frameId + '" name="' + frameId + '" style="position:absolute; top:-9999px; left:-9999px"'; //建立iframe元素        if (window.ActiveXObject) {//判斷瀏覽器是否支援ActiveX控制項            if (typeof uri == 'boolean') {                iframeHtml += ' src="' + 'javascript:false' + '"';            }            else if (typeof uri == 'string') {                iframeHtml += ' src="' + uri + '"';            }        }        iframeHtml += ' />';        jQuery(iframeHtml).appendTo(document.body); //將動態iframe追加到body中        return jQuery('#' + frameId).get(0); //返回iframe對象    },    createUploadForm: function (id, fileElementId, data) {//id為當前系統時間字串，fileElementId為頁面<input type='file' />的id，data的值需要根據傳入json的鍵來決定        //create form            var formId = 'jUploadForm' + id; //給form添加一個獨一無二的id        var fileId = 'jUploadFile' + id; //給<input type='file' />添加一個獨一無二的id        var form = jQuery('<form  action="" method="POST" name="' + formId + '" id="' + formId + '" enctype="multipart/form-data" ></form>'); //建立form元素        if (data) {//通常為false            for (var i in data) {                jQuery('<input type="hidden" name="' + i + '" value="' + data[i] + '" />').appendTo(form); //根據data的內容，建立隱藏欄位，這部分我還不知道是什麼時候用到。估計是傳入json的時候，如果預設傳一些參數的話要用到。            }        }        var oldElement = jQuery('#' + fileElementId); //得到頁面中的<input type='file' />對象        var newElement = jQuery(oldElement).clone(); //複製頁面中的<input type='file' />對象        jQuery(oldElement).attr('id', fileId); //修改原對象的id        jQuery(oldElement).before(newElement); //在原對象前插入複製對象        jQuery(oldElement).appendTo(form); //把原對象插入到動態form的結尾處        //set attributes        jQuery(form).css('position', 'absolute'); //給動態form添加樣式，使其浮動起來，        jQuery(form).css('top', '-1200px');        jQuery(form).css('left', '-1200px');        jQuery(form).appendTo('body'); //把動態form插入到body中        return form;    },    ajaxFileUpload: function (s) {//這裡s是個json對象，傳入一些ajax的參數        // TODO introduce global settings, allowing the client to modify them for all requests, not only timeout                s = jQuery.extend({}, jQuery.ajaxSettings, s); //此時的s對象是由jQuery.ajaxSettings和原s對象擴充後的對象        var id = new Date().getTime(); //取當前系統時間，目的是得到一個獨一無二的數字        var form = jQuery.createUploadForm(id, s.fileElementId, (typeof (s.data) == 'undefined' ? false : s.data)); //建立動態form        var io = jQuery.createUploadIframe(id, s.secureuri); //建立動態iframe        var frameId = 'jUploadFrame' + id; //動態iframe的id        var formId = 'jUploadForm' + id; //動態form的id        // Watch for a new set of requests        if (s.global && !jQuery.active++) {//當jQuery開始一個ajax請求時發生            jQuery.event.trigger("ajaxStart"); //觸發ajaxStart方法        }        var requestDone = false; //請求完成標誌        // Create the request object        var xml = {};        if (s.global)            jQuery.event.trigger("ajaxSend", [xml, s]); //觸發ajaxSend方法        // Wait for a response to come back        var uploadCallback = function (isTimeout) {//回呼函數            var io = document.getElementById(frameId); //得到iframe對象            try {                if (io.contentWindow) {//動態iframe所在視窗對象是否存在                    xml.responseText = io.contentWindow.document.body ? io.contentWindow.document.body.innerHTML : null;                    xml.responseXML = io.contentWindow.document.XMLDocument ? io.contentWindow.document.XMLDocument : io.contentWindow.document;                } else if (io.contentDocument) {//動態iframe的文檔對象是否存在                    xml.responseText = io.contentDocument.document.body ? io.contentDocument.document.body.innerHTML : null;                    xml.responseXML = io.contentDocument.document.XMLDocument ? io.contentDocument.document.XMLDocument : io.contentDocument.document;                }            } catch (e) {                jQuery.handleError(s, xml, null, e);            }            if (xml || isTimeout == "timeout") {//xml變數被賦值或者isTimeout == "timeout"都表示請求發出，並且有響應                requestDone = true; //請求完成                var status;                try {                    status = isTimeout != "timeout" ? "success" : "error"; //如果不是“逾時”，表示請求成功                    // Make sure that the request was successful or notmodified                    if (status != "error") {                        // process the data (runs the xml through httpData regardless of callback)                        var data = jQuery.uploadHttpData(xml, s.dataType); //根據傳送的type類型，返回json對象，此時返回的data就是後台操作後的返回結果                        // If a local callback was specified, fire it and pass it the data                        if (s.success)                            s.success(data, status); //執行上傳成功的操作                        // Fire the global callback                        if (s.global)                            jQuery.event.trigger("ajaxSuccess", [xml, s]);                    } else                        jQuery.handleError(s, xml, status);                } catch (e) {                    status = "error";                    jQuery.handleError(s, xml, status, e);                }                // The request was completed                if (s.global)                    jQuery.event.trigger("ajaxComplete", [xml, s]);                // Handle the global AJAX counter                if (s.global && ! --jQuery.active)                    jQuery.event.trigger("ajaxStop");                // Process result                if (s.complete)                    s.complete(xml, status);                jQuery(io).unbind();//移除iframe的事件處理常式                setTimeout(function () {//設定逾時時間                    try {                        jQuery(io).remove();//移除動態iframe                        jQuery(form).remove();//移除動態form                    } catch (e) {                        jQuery.handleError(s, xml, null, e);                    }                }, 100)                xml = null            }        }        // Timeout checker        if (s.timeout > 0) {//逾時檢測            setTimeout(function () {                // Check to see if the request is still happening                if (!requestDone) uploadCallback("timeout");//如果請求仍未完成，就發送逾時訊號            }, s.timeout);        }        try {            var form = jQuery('#' + formId);            jQuery(form).attr('action', s.url);//傳入的ajax頁面導向url            jQuery(form).attr('method', 'POST');//設定提交表單方式            jQuery(form).attr('target', frameId);//返回的目標iframe，就是建立的動態iframe            if (form.encoding) {//選擇編碼方式                jQuery(form).attr('encoding', 'multipart/form-data');            }            else {                jQuery(form).attr('enctype', 'multipart/form-data');            }            jQuery(form).submit();//提交form表單        } catch (e) {            jQuery.handleError(s, xml, null, e);        }        jQuery('#' + frameId).load(uploadCallback); //ajax 請求從伺服器載入資料，同時傳入回呼函數        return { abort: function () { } };    },    uploadHttpData: function (r, type) {        var data = !type;        data = type == "xml" || data ? r.responseXML : r.responseText;        // If the type is "script", eval it in global context        if (type == "script")            jQuery.globalEval(data);        // Get the JavaScript object, if JSON is used.        if (type == "json")            eval("data = " + data);        // evaluate scripts within html        if (type == "html")            jQuery("<div>").html(data).evalScripts();        return data;    }}) 

ajaxfileupload.js外掛程式大致的思路就是如上所述，但是對於ajax來說，傳值也是相當關鍵的部分，也就是傳入的json對象裡的索引值對。調用方法如下：

$.ajaxFileUpload(    {        url: '../../XXXX/XXXX.aspx', //用於檔案上傳的伺服器端請求地址        secureuri: false,           //一般設定為false        fileElementId: $("input#xxx").attr("id"), //檔案上傳控制項的id屬性  <input type="file" id="file" name="file" /> 注意，這裡一定要有name值                                                   //$("form").serialize(),表單序列化。指把所有元素的ID，NAME 等全部發過去        dataType: 'json',//傳回值類型 一般設定為json        complete: function () {//只要完成即執行，最後執行        },        success: function (data, status)  //伺服器成功響應處理函數        {            if (typeof (data.error) != 'undefined') {                if (data.error != '') {                    if (data.error == "1001") {//這個error（錯誤碼）是由自己定義的，根據後台返回的json對象的索引值而判斷                    }                    else if (data.error == "1002") {                    }                    alert(data.msg);//同error                    return;                } else {                    alert(data.msg);                }            }            /*                *    這裡就是做一些其他動作，比如把圖片顯示到某控制項中去之類的。                */        },        error: function (data, status, e)//伺服器響應失敗處理函數        {            alert(e);        }    })

 

整個就是使用ajaxfileupload.js外掛程式的大致方法。當然，明白其工作原理越透徹，我們也就能越好的去操作和使用它。

以上的分析希望對剛接觸ajaxfileupload.js外掛程式的朋友們有協助。

檔案：http://files.cnblogs.com/zhouhongyu1989/ajaxfileupload.js