jQuery 關(guān)于ajaxfileupload.js插件的逐步解析（ajaxfileupload.js第二彈）

如果你看了上一篇《ASP.NET 使用js插件出現(xiàn)上傳較大文件失敗的解決方法（ajaxfileupload.js第一彈）》的話，應(yīng)該就知道我是逼不得已要認(rèn)真學(xué)習(xí)下ajaxfileupload.js這個(gè)上傳文件插件的。哈哈，開(kāi)個(gè)玩笑啦，其實(shí)學(xué)習(xí)是給自己學(xué)的，而且學(xué)會(huì)了真的是很享受的~

這篇呢，就是想把這個(gè)插件的思路說(shuō)一下，其中中文注解是我寫(xiě)的，英文注解應(yīng)該是原作者寫(xiě)的吧~說(shuō)實(shí)話，有些if判斷里的東西我也沒(méi)太弄明白，但是大致思路還是OK的。

jQuery.extend({


    createUploadIframe: function (id, uri) {//id為當(dāng)前系統(tǒng)時(shí)間字符串，uri是外部傳入的json對(duì)象的一個(gè)參數(shù)
        //create frame
        var frameId = 'jUploadFrame' + id; //給iframe添加一個(gè)獨(dú)一無(wú)二的id
        var iframeHtml = '<iframe id="' + frameId + '" name="' + frameId + '" '; //創(chuàng)建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); //將動(dòng)態(tài)iframe追加到body中

        return jQuery('#' + frameId).get(0); //返回iframe對(duì)象
    },
    createUploadForm: function (id, fileElementId, data) {//id為當(dāng)前系統(tǒng)時(shí)間字符串，fileElementId為頁(yè)面<input type='file' />的id，data的值需要根據(jù)傳入json的鍵來(lái)決定
        //create form    
        var formId = 'jUploadForm' + id; //給form添加一個(gè)獨(dú)一無(wú)二的id
        var fileId = 'jUploadFile' + id; //給<input type='file' />添加一個(gè)獨(dú)一無(wú)二的id
        var form = jQuery('<form  action="" method="POST" name="' + formId + '" id="' + formId + '" enctype="multipart/form-data" ></form>'); //創(chuàng)建form元素
        if (data) {//通常為false
            for (var i in data) {
                jQuery('<input type="hidden" name="' + i + '" value="' + data[i] + '" />').appendTo(form); //根據(jù)data的內(nèi)容，創(chuàng)建隱藏域，這部分我還不知道是什么時(shí)候用到。估計(jì)是傳入json的時(shí)候，如果默認(rèn)傳一些參數(shù)的話要用到。
            }
        }
        var oldElement = jQuery('#' + fileElementId); //得到頁(yè)面中的<input type='file' />對(duì)象
        var newElement = jQuery(oldElement).clone(); //克隆頁(yè)面中的<input type='file' />對(duì)象
        jQuery(oldElement).attr('id', fileId); //修改原對(duì)象的id
        jQuery(oldElement).before(newElement); //在原對(duì)象前插入克隆對(duì)象
        jQuery(oldElement).appendTo(form); //把原對(duì)象插入到動(dòng)態(tài)form的結(jié)尾處



        //set attributes
        jQuery(form).css('position', 'absolute'); //給動(dòng)態(tài)form添加樣式，使其浮動(dòng)起來(lái)，
        jQuery(form).css('top', '-1200px');
        jQuery(form).css('left', '-1200px');
        jQuery(form).appendTo('body'); //把動(dòng)態(tài)form插入到body中
        return form;
    },

    ajaxFileUpload: function (s) {//這里s是個(gè)json對(duì)象，傳入一些ajax的參數(shù)
        // TODO introduce global settings, allowing the client to modify them for all requests, not only timeout        
        s = jQuery.extend({}, jQuery.ajaxSettings, s); //此時(shí)的s對(duì)象是由jQuery.ajaxSettings和原s對(duì)象擴(kuò)展后的對(duì)象
        var id = new Date().getTime(); //取當(dāng)前系統(tǒng)時(shí)間，目的是得到一個(gè)獨(dú)一無(wú)二的數(shù)字
        var form = jQuery.createUploadForm(id, s.fileElementId, (typeof (s.data) == 'undefined' ? false : s.data)); //創(chuàng)建動(dòng)態(tài)form
        var io = jQuery.createUploadIframe(id, s.secureuri); //創(chuàng)建動(dòng)態(tài)iframe
        var frameId = 'jUploadFrame' + id; //動(dòng)態(tài)iframe的id
        var formId = 'jUploadForm' + id; //動(dòng)態(tài)form的id
        // Watch for a new set of requests
        if (s.global && !jQuery.active++) {//當(dāng)jQuery開(kāi)始一個(gè)ajax請(qǐng)求時(shí)發(fā)生
            jQuery.event.trigger("ajaxStart"); //觸發(fā)ajaxStart方法
        }
        var requestDone = false; //請(qǐng)求完成標(biāo)志
        // Create the request object
        var xml = {};
        if (s.global)
            jQuery.event.trigger("ajaxSend", [xml, s]); //觸發(fā)ajaxSend方法
        // Wait for a response to come back
        var uploadCallback = function (isTimeout) {//回調(diào)函數(shù)
            var io = document.getElementById(frameId); //得到iframe對(duì)象
            try {
                if (io.contentWindow) {//動(dòng)態(tài)iframe所在窗口對(duì)象是否存在
                    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) {//動(dòng)態(tài)iframe的文檔對(duì)象是否存在
                    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"都表示請(qǐng)求發(fā)出，并且有響應(yīng)
                requestDone = true; //請(qǐng)求完成
                var status;
                try {
                    status = isTimeout != "timeout" ? "success" : "error"; //如果不是“超時(shí)”，表示請(qǐng)求成功
                    // 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); //根據(jù)傳送的type類型，返回json對(duì)象，此時(shí)返回的data就是后臺(tái)操作后的返回結(jié)果
                        // If a local callback was specified, fire it and pass it the data
                        if (s.success)
                            s.success(data, status); //執(zhí)行上傳成功的操作

                        // 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 () {//設(shè)置超時(shí)時(shí)間
                    try {
                        jQuery(io).remove();//移除動(dòng)態(tài)iframe
                        jQuery(form).remove();//移除動(dòng)態(tài)form

                    } catch (e) {
                        jQuery.handleError(s, xml, null, e);
                    }

                }, 100)

                xml = null

            }
        }
        // Timeout checker
        if (s.timeout > 0) {//超時(shí)檢測(cè)
            setTimeout(function () {
                // Check to see if the request is still happening
                if (!requestDone) uploadCallback("timeout");//如果請(qǐng)求仍未完成，就發(fā)送超時(shí)信號(hào)
            }, s.timeout);
        }
        try {

            var form = jQuery('#' + formId);
            jQuery(form).attr('action', s.url);//傳入的ajax頁(yè)面導(dǎo)向url
            jQuery(form).attr('method', 'POST');//設(shè)置提交表單方式
            jQuery(form).attr('target', frameId);//返回的目標(biāo)iframe，就是創(chuàng)建的動(dòng)態(tài)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 請(qǐng)求從服務(wù)器加載數(shù)據(jù)，同時(shí)傳入回調(diào)函數(shù)
        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插件大致的思路就是如上所述，但是對(duì)于ajax來(lái)說(shuō)，傳值也是相當(dāng)關(guān)鍵的部分，也就是傳入的json對(duì)象里的鍵值對(duì)。

調(diào)用方法如下：

$.ajaxFileUpload
(
    {
        url: '../../XXXX/XXXX.aspx', //用于文件上傳的服務(wù)器端請(qǐng)求地址
        secureuri: false,           //一般設(shè)置為false
        fileElementId: $("input#xxx").attr("id"), //文件上傳控件的id屬性  <input type="file" id="file" name="file" /> 注意，這里一定要有name值   
                                                //$("form").serialize(),表單序列化。指把所有元素的ID，NAME 等全部發(fā)過(guò)去
        dataType: 'json',//返回值類型 一般設(shè)置為json
        complete: function () {//只要完成即執(zhí)行，最后執(zhí)行
        },
        success: function (data, status)  //服務(wù)器成功響應(yīng)處理函數(shù)
        {
            if (typeof (data.error) != 'undefined') {
                if (data.error != '') {
                    if (data.error == "1001") {//這個(gè)error（錯(cuò)誤碼）是由自己定義的，根據(jù)后臺(tái)返回的json對(duì)象的鍵值而判斷
                    }
                    else if (data.error == "1002") {
                    }
                    alert(data.msg);//同error
                    return;
                } else {
                    alert(data.msg);
                }
            }
            /*
                *    這里就是做一些其他操作，比如把圖片顯示到某控件中去之類的。
                */
        },
        error: function (data, status, e)//服務(wù)器響應(yīng)失敗處理函數(shù)
        {
            alert(e);
        }
    }
)

整個(gè)就是使用ajaxfileupload.js插件的大致方法。當(dāng)然，明白其工作原理越透徹，我們也就能越好的去操作和使用它。

以上的分析希望對(duì)剛接觸ajaxfileupload.js插件的朋友們有幫助。

還有最后一彈，如有感興趣的朋友，請(qǐng)關(guān)注：

jQuery 自制上傳頭像插件-附帶Demo實(shí)例（ajaxfileupload.js第三彈）

補(bǔ)充：

《jQuery 關(guān)于IE9上傳文件無(wú)法進(jìn)入后臺(tái)原因及解決辦法（ajaxfileupload.js第四彈）》