需要注意的地方 这里文件域 必须有 id 和name
<input type="file" name="file1" id="file1" style="width: 300px" />
需要引入的js ajaxfileupload.js 做过修改
1 var uploadHelper = { 2 handleError: function (s, xhr, status, e) { 3 // If a local callback was specified, fire it 4 if (s.error) { 5 s.error.call(s.context || s, xhr, status, e); 6 } 7 8 // Fire the global callback 9 if (s.global) { 10 (s.context ? jQuery(s.context) : jQuery.event).trigger("ajaxError", [xhr, s, e]); 11 } 12 }, 13 createUploadIframe: function (id, uri) { 14 //create frame 15 var frameId = 'jUploadFrame' + id; 16 var iframeHtml = '<iframe >; 17 if (window.ActiveXObject) { 18 if (typeof uri == 'boolean') { 19 iframeHtml += ' src="' + 'javascript:false' + '"'; 20 21 } 22 else if (typeof uri == 'string') { 23 iframeHtml += ' src="' + uri + '"'; 24 25 } 26 } 27 iframeHtml += ' />'; 28 jQuery(iframeHtml).appendTo(document.body); 29 30 return jQuery('#' + frameId).get(0); 31 }, 32 createUploadForm: function (id, fileElementId, data) { 33 debugger; 34 //create form 35 var formId = 'jUploadForm' + id; 36 var fileId = 'jUploadFile' + id; 37 var form = jQuery('<form action="" method="POST" name="' + formId + '" >); 38 if (data) { 39 for (var i in data) { 40 jQuery('<input type="hidden" name="' + i + '" value="' + data[i] + '" />').appendTo(form); 41 } 42 } 43 var oldElement = jQuery('#' + fileElementId); 44 var newElement = jQuery(oldElement).clone(); 45 jQuery(oldElement).attr('id', fileId); 46 jQuery(oldElement).before(newElement); 47 jQuery(oldElement).appendTo(form); 48 49 50 51 //set attributes 52 jQuery(form).css('position', 'absolute'); 53 jQuery(form).css('top', '-1200px'); 54 jQuery(form).css('left', '-1200px'); 55 jQuery(form).appendTo('body'); 56 return form; 57 }, 58 59 ajaxFileUpload: function (s) { 60 // TODO introduce global settings, allowing the client to modify them for all requests, not only timeout 61 s = jQuery.extend({}, jQuery.ajaxSettings, s); 62 var id = new Date().getTime() 63 var form = uploadHelper.createUploadForm(id, s.fileElementId, (typeof (s.data) == 'undefined' ? false : s.data)); 64 var io = uploadHelper.createUploadIframe(id, s.secureuri); 65 var frameId = 'jUploadFrame' + id; 66 var formId = 'jUploadForm' + id; 67 // Watch for a new set of requests 68 if (s.global && !jQuery.active++) { 69 jQuery.event.trigger("ajaxStart"); 70 } 71 var requestDone = false; 72 // Create the request object 73 var xml = {} 74 if (s.global) 75 jQuery.event.trigger("ajaxSend", [xml, s]); 76 // Wait for a response to come back 77 var uploadCallback = function (isTimeout) { 78 var io = document.getElementById(frameId); 79 try { 80 if (io.contentWindow) { 81 xml.responseText = io.contentWindow.document.body ? io.contentWindow.document.body.innerHTML : null; 82 xml.responseXML = io.contentWindow.document.XMLDocument ? io.contentWindow.document.XMLDocument : io.contentWindow.document; 83 84 } else if (io.contentDocument) { 85 xml.responseText = io.contentDocument.document.body ? io.contentDocument.document.body.innerHTML : null; 86 xml.responseXML = io.contentDocument.document.XMLDocument ? io.contentDocument.document.XMLDocument : io.contentDocument.document; 87 } 88 } catch (e) { 89 uploadHelper.handleError(s, xml, null, e); 90 } 91 if (xml || isTimeout == "timeout") { 92 requestDone = true; 93 var status; 94 try { 95 status = isTimeout != "timeout" ? "success" : "error"; 96 // Make sure that the request was successful or notmodified 97 if (status != "error") { 98 // process the data (runs the xml through httpData regardless of callback) 99 var data = uploadHelper.uploadHttpData(xml, s.dataType); 100 // If a local callback was specified, fire it and pass it the data 101 if (s.success) 102 s.success(data, status); 103 104 // Fire the global callback 105 if (s.global) 106 jQuery.event.trigger("ajaxSuccess", [xml, s]); 107 } else 108 jQuery.handleError(s, xml, status); 109 } catch (e) { 110 status = "error"; 111 uploadHelper.handleError(s, xml, status, e); 112 } 113 114 // The request was completed 115 if (s.global) 116 jQuery.event.trigger("ajaxComplete", [xml, s]); 117 118 // Handle the global AJAX counter 119 if (s.global && ! --jQuery.active) 120 jQuery.event.trigger("ajaxStop"); 121 122 // Process result 123 if (s.complete) 124 s.complete(xml, status); 125 126 jQuery(io).unbind() 127 128 setTimeout(function () { 129 try { 130 jQuery(io).remove(); 131 jQuery(form).remove(); 132 133 } catch (e) { 134 jQuery.handleError(s, xml, null, e); 135 } 136 137 }, 100) 138 139 xml = null 140 141 } 142 } 143 // Timeout checker 144 if (s.timeout > 0) { 145 setTimeout(function () { 146 // Check to see if the request is still happening 147 if (!requestDone) uploadCallback("timeout"); 148 }, s.timeout); 149 } 150 try { 151 152 var form = jQuery('#' + formId); 153 jQuery(form).attr('action', s.url); 154 jQuery(form).attr('method', 'POST'); 155 jQuery(form).attr('target', frameId); 156 if (form.encoding) { 157 jQuery(form).attr('encoding', 'multipart/form-data'); 158 } 159 else { 160 jQuery(form).attr('enctype', 'multipart/form-data'); 161 } 162 jQuery(form).submit(); 163 164 } catch (e) { 165 jQuery.handleError(s, xml, null, e); 166 } 167 168 jQuery('#' + frameId).load(uploadCallback); 169 return { abort: function () { } }; 170 171 }, 172 173 uploadHttpData: function (r, type) { 174 var data = !type; 175 data = type == "xml" || data ? r.responseXML : r.responseText; 176 // If the type is "script", eval it in global context 177 if (type == "script") 178 jQuery.globalEval(data); 179 // Get the JavaScript object, if JSON is used. 180 if (type == "json") 181 eval("data = \" " + data + " \" "); 182 // evaluate scripts within html 183 if (type == "html") 184 jQuery("<div>").html(data).evalScripts(); 185 186 return data; 187 } 188 189 };