ajax + ajaxfileupload 上傳文件

</pre>有很多時候不能使用form提交表單的形式去異步上傳文件，ajaxfileupload.js 是一個很不錯的選擇，不需要form表單就可以直接提交，ajaxfileupload.js  是基於jq的，所以引用ajaxfileupload.js之前需要先引用jq<p></p><p></p><pre code_snippet_id="1889832" snippet_file_name="blog_20160920_2_7231228" name="code" class="javascript"><script src="/Themes/Scripts/jquery-1.8.2.min.js" type="text/javascript"></script>
    <script src="script/ajaxfileupload.js" type="text/javascript"></script>

html

<a href="#" data="f12913db-1273-4090-af49-ce6e802f2654&wenjian" class="a-upload"><span style="font-family: Arial, Helvetica, sans-serif;"><input type="file" class="upfile" name="fillName" id="f12913db-1273-4090-af49-ce6e802f2654&wenjian" >點擊這裏上傳文件</a></span><span style="font-family: Arial, Helvetica, sans-serif;"><input type="hidden" runat="server" id="H_f12913db-1273-4090-af49-ce6e802f2654&wenjian"  name="z_f12913db-1273-4090-af49-ce6e802f2654&wenjian"></span>

jq

//上傳文件
    $('.upfile').change(function () {   //預覽
        // 獲取FileList的第一個元素
        var id = $(this).attr("id");
        id = id.split('|')[0];
        $.ajaxFileUpload({
            url: 'UploadFile.ashx',
            secureuri: false, //<span style="font-family: verdana, sans-serif; font-size: 13px; line-height: 19.5px;">是否啓用安全提交，默認爲false。 </span>
            fileElementId: id,
            dataType: 'json',
            success: function (data, status) {
                $("#H_" + id).attr("value", data);
                $("#H_" + id).parent().append("<div class=\"ts_img\" id=\"err_User_name\"><img src=\"images/dui.png\" width=\"16px\"></div>");
            },
            error: function (data, status, e) {
                $("#H_" + id).attr("value", src);
                $("#H_" + id).parent().append("<div class=\"ts_img\" id=\"err_User_name\"><img src=\"images/cuo.png\" width=\"16px\"></div>");
            }
        });
    });

然後問題來了，文件明明上傳成功，但是總是走erroe，不進success,

後來我把data輸出到控制檯發現輸出結果是

發現返回值被<pre>標籤包括這，然後我在網上各種找，用了半天事件解決了

把eval("data = " + data);  換成 eval("data = \" " + data + " \" ") 即可

然後你仔細看會發現，我的id中有特殊字符，可能也會是你上傳走error， 

把oldElement的取值換一下就行了，仔細試試就OK了

如果你覺得很好，贊一下吧，鼓勵一下~~~~~~

好人做到底，我把我的ajaxfileupload.js代碼粘貼一下

// JavaScript Document
jQuery.extend({

    createUploadIframe: function (id, uri) {
        //create frame
        var frameId = 'jUploadFrame' + id;

        if (window.ActiveXObject) {
            //var io = document.createElement(' id="' + frameId + '" name="' + frameId + '" />');
            if (jQuery.browser.version == "9.0" || jQuery.browser.version == "10.0") {
                var io = document.createElement('iframe');
                io.id = frameId;
                io.name = frameId;
            } else if (jQuery.browser.version == "6.0" || jQuery.browser.version == "7.0" || jQuery.browser.version == "8.0") {
                var io = document.createElement(' id="' + frameId + '" name="' + frameId + '" />');
                if (typeof uri == 'boolean') {
                    io.src = 'javascript:false';
                }
                else if (typeof uri == 'string') {
                    io.src = uri;
                }
            }
        } else {
            var io = document.createElement('iframe');
            io.id = frameId;
            io.name = frameId;
        }
        io.style.position = 'absolute';
        io.style.top = '-1000px';
        io.style.left = '-1000px';

        document.body.appendChild(io);

        return io;
    },
    createUploadForm: function (id, fileElementId, data) {
        //create form 
        var formId = 'jUploadForm' + id;
        var fileId = 'jUploadFile' + id;
        var form = jQuery('

'); //var oldElement = jQuery('#' + fileElementId); var oldElement = document.getElementById(fileElementId);// jQuery('#' + fileElementId); var newElement = jQuery(oldElement).clone(); jQuery(oldElement).attr('id', fileId); jQuery(oldElement).before(newElement); jQuery(oldElement).appendTo(form); //add data if (data) { for (var i in data) { $('').appendTo(form); } } //set attributes jQuery(form).css('position', 'absolute'); jQuery(form).css('top', '-1200px'); jQuery(form).css('left', '-1200px'); jQuery(form).appendTo('body'); return form; }, 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.id; //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; if (s.global && !jQuery.active++) { // Watch for a new set of requests jQuery.event.trigger("ajaxStart"); } var requestDone = false; // Create the request object var xml = {}; if (s.global) { jQuery.event.trigger("ajaxSend", [xml, s]); } var uploadCallback = function (isTimeout) { // Wait for a response to come back var io = document.getElementById(frameId); try { if (io.contentWindow) { 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) { 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") { 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); if (s.success) { // ifa local callback was specified, fire it and pass it the data s.success(data, status); }; if (s.global) { // Fire the global callback jQuery.event.trigger("ajaxSuccess", [xml, s]); }; } else { jQuery.handleError(s, xml, status); } } catch (e) { status = "error"; jQuery.handleError(s, xml, status, e); }; if (s.global) { // The request was completed jQuery.event.trigger("ajaxComplete", [xml, s]); }; // Handle the global AJAX counter if (s.global && ! --jQuery.active) { jQuery.event.trigger("ajaxStop"); }; if (s.complete) { s.complete(xml, status); }; jQuery(io).unbind(); setTimeout(function () { try { jQuery(io).remove(); jQuery(form).remove(); } catch (e) { jQuery.handleError(s, xml, null, e); } }, 100); xml = null; }; } // Timeout checker if (s.timeout > 0) { setTimeout(function () { if (!requestDone) { uploadCallback("timeout"); } }, s.timeout); } try { var form = jQuery('#' + formId); jQuery(form).attr('action', s.url); jQuery(form).attr('method', 'POST'); jQuery(form).attr('target', frameId); if (form.encoding) { form.encoding = 'multipart/form-data'; } else { form.enctype = 'multipart/form-data'; } jQuery(form).submit(); } catch (e) { jQuery.handleError(s, xml, null, e); } /*if(window.attachEvent){ document.getElementById(frameId).attachEvent('onload', uploadCallback); } else{ document.getElementById(frameId).addEventListener('load', uploadCallback, false); } */ jQuery('#' + frameId).load(uploadCallback); return { abort: function () { } }; }, 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 = r.responseText; var start = data.indexOf(">"); if (start != -1) { var end = data.indexOf("<", start + 1); if (end != -1) { data = data.substring(start + 1, end); } } //eval("data = " + data); //此處eval("data = " + data) 改爲了下面的轉換 //目的是：返回的data對象中還有其他字符串，且文件上傳成功但是走error eval("data = \" " + data + " \" ") } // evaluate scripts within html if (type == "html") { jQuery("

").html(data).evalScripts(); } return data; }, /*handleError: function( s, xml, status, e ) { // If a local callback was specified, fire it if ( s.error ) s.error( xml, status, e ); // Fire the global callback if ( s.global ) jQuery.event.trigger( "ajaxError", [xml, s, e] ); }*/ 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]); } } });