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