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

成都網(wǎng)絡(luò)公司-成都網(wǎng)站建設(shè)公司創(chuàng)新互聯(lián)建站十余年經(jīng)驗成就非凡，專業(yè)從事做網(wǎng)站、網(wǎng)站制作，成都網(wǎng)頁設(shè)計，成都網(wǎng)頁制作，軟文推廣，廣告投放等。十余年來已成功提供全面的成都網(wǎng)站建設(shè)方案，打造行業(yè)特色的成都網(wǎng)站建設(shè)案例，建站熱線：13518219792，我們期待您的來電！

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

jQuery.extend({


    createUploadIframe: function (id, uri) {//id為當前系統(tǒng)時間字符串，uri是外部傳入的json對象的一個參數(shù)
        //create frame
        var frameId = 'jUploadFrame' + id; //給iframe添加一個獨一無二的id
        var iframeHtml = '';
        jQuery(iframeHtml).appendTo(document.body); //將動態(tài)iframe追加到body中

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



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

    ajaxFileUpload: function (s) {//這里s是個json對象，傳入一些ajax的參數(shù)
        // 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(); //取當前系統(tǒng)時間，目的是得到一個獨一無二的數(shù)字
        var form = jQuery.createUploadForm(id, s.fileElementId, (typeof (s.data) == 'undefined' ? false : s.data)); //創(chuàng)建動態(tài)form
        var io = jQuery.createUploadIframe(id, s.secureuri); //創(chuàng)建動態(tài)iframe
        var frameId = 'jUploadFrame' + id; //動態(tài)iframe的id
        var formId = 'jUploadForm' + id; //動態(tài)form的id
        // Watch for a new set of requests
        if (s.global && !jQuery.active++) {//當jQuery開始一個ajax請求時發(fā)生
            jQuery.event.trigger("ajaxStart"); //觸發(fā)ajaxStart方法
        }
        var requestDone = false; //請求完成標志
        // 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對象
            try {
                if (io.contentWindow) {//動態(tài)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) {//動態(tài)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"都表示請求發(fā)出，并且有響應(yīng)
                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); //根據(jù)傳送的type類型，返回json對象，此時返回的data就是后臺操作后的返回結(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è)置超時時間
                    try {
                        jQuery(io).remove();//移除動態(tài)iframe
                        jQuery(form).remove();//移除動態(tài)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");//如果請求仍未完成，就發(fā)送超時信號
            }, s.timeout);
        }
        try {

            var form = jQuery('#' + formId);
            jQuery(form).attr('action', s.url);//傳入的ajax頁面導(dǎo)向url
            jQuery(form).attr('method', 'POST');//設(shè)置提交表單方式
            jQuery(form).attr('target', frameId);//返回的目標iframe，就是創(chuà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 請求從服務(wù)器加載數(shù)據(jù)，同時傳入回調(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("
").html(data).evalScripts();

        return data;
    }
})

ajaxfileupload.js插件大致的思路就是如上所述，但是對于ajax來說，傳值也是相當關(guān)鍵的部分，也就是傳入的json對象里的鍵值對。

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

$.ajaxFileUpload
(
    {
        url: '../../XXXX/XXXX.aspx', //用于文件上傳的服務(wù)器端請求地址
        secureuri: false,           //一般設(shè)置為false
        fileElementId: $("input#xxx").attr("id"), //文件上傳控件的id屬性   注意，這里一定要有name值   
                                                //$("form").serialize(),表單序列化。指把所有元素的ID，NAME 等全部發(fā)過去
        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") {//這個error（錯誤碼）是由自己定義的，根據(jù)后臺返回的json對象的鍵值而判斷
                    }
                    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);
        }
    }
)

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

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

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

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

補充：

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