码迷,mamicode.com
首页 > Web开发 > 详细

Js 插件修改及优化总结

时间:2015-11-09 18:26:20      阅读:261      评论:0      收藏:0      [点我收藏+]

标签:

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


Js 插件修改及优化总结

标签:

原文地址:http://www.cnblogs.com/warm-stranger/p/4950456.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!