jQuery 關於ajaxfileupload.js插件的逐步解析（ajaxfileupload.js第二彈）

時間 2019-12-08

標籤 jquery 關於 ajaxfileupload.js ajaxfileupload 插件逐步解析第二欄目 JQuery 简体版

原文原文鏈接

若是你看了上一篇《ASP.NET 使用ajaxfileupload.js插件出現上傳較大文件失敗的解決方法（ajaxfileupload.js第一彈）》的話，應該就知道我是逼不得已要認真學習下ajaxfileupload.js這個上傳文件插件的。哈哈，開個玩笑啦，其實學習是給本身學的，並且學會了真的是很享受的~javascript

這篇呢，就是想把這個插件的思路說一下，其中中文註解是我寫的，英文註解應該是原做者寫的吧~說實話，有些if判斷裏的東西我也沒太弄明白，可是大體思路仍是OK的。css

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對象裏的鍵值對。html

調用方法以下：java

$.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);
        }
    }
)