1. ajaxfileupload 上传插件版本问题以及数据处理问题
参考链接: http://liwx2000.iteye.com/blog/1540321
现在大家至少也在用jquery1.9以上的版本,ajaxfileupload的版本早就不更新了,只有jquery1.4.2以前的版本才会有handleError这个方法,所以如果直接拿ajaxfileupload和当前的jquery版本搭配使用,肯定会报错jQuery.handleError is not a function。
所以我们需要在ajaxfileupload.js文件的最前边加上handleError 这个方法,即可避免这个错误。
//此处是需要添加的代码 jQuery.extend({ 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] ); } } }); //此处添加的代码结束 jQuery.extend({ createUploadIframe: function(id, uri) { //create frame var frameId = 'jUploadFrame' + id; if(window.ActiveXObject) { var io = document.createElement('<iframe 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; } 。。。。。。。。。。。。。。
虽然这个错误解决了,但是后边运行的时候依然不能顺利走下去。
function ajaxFileUpload() { $.ajaxFileUpload ( { url: '/upload', secureuri: false, fileElementId: 'file_field', dataType: 'json', //这里选择了json success: function (data, status) { alert(data); }, error: function (data, status, e) { alert(e); } } ) }
结果在chrome和FireFox浏览器出现如下错误:
将dataType的定义删掉,所以默认为text,则在success中打印出返回的结果,发现json数据确实被<pre></pre>包裹着。
因为Server端的Response上加上了contentType="application/json"。但有时后端这么做是必须的,所以修改ajaxFileUpload源码,将<pre></pre>标签去掉,如下:
代码如此一改,则可以正常进行文件上传,处理返回的json格式的数据。
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" ) { ////////////以下为新增代码/////////////// 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); } // evaluate scripts within html if ( type == "html" ) jQuery("<div>").html(data).evalScripts(); return data; }