Js 插件修改及优化总结

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;
}