ajaxfileupload.js实现异步上传图片

使用Jquery做上传文件处理时,用到了ajaxfileupload.js 这个第三方代码,但是在使用过程中出现了一些问题,现在整理了一下,并加修改后的ajaxfileupload.js上传,供大家参考。

十载专注成都网站制作,成都定制网页设计,个人网站制作服务,为大家分享网站制作知识、方案,网站设计流程、步骤,成功服务上千家企业。为您提供网站建设,网站制作,网页设计及定制高端网站建设服务,专注于成都定制网页设计,高端网页制作,对搬家公司等多个领域,拥有丰富的网站营销经验。

问题一:

    无法携带参数,只能提交文件。

解决办法:

    找到文件中createUploadForm: function(id, fileElementId) 方法添加一个data参数,并将data中的数据拼接进去即可。代码如下:

 createUploadForm: function(id, fileElementId, data)

 {

  //create form 

  var formId = 'jUploadForm' + id;

  var fileId = 'jUploadFile' + id;

  var form = jQuery('

'); 

  var oldElement = jQuery('#' + fileElementId);

  var newElement = jQuery(oldElement).clone();

  jQuery(oldElement).attr('id', fileId);

  jQuery(oldElement).before(newElement);

  jQuery(oldElement).appendTo(form);

  if (data) {

      for (var i in data) {

          $('').appendTo(form);

      }

  }

然后找到调用createUploadForm方法的地方,修改入参:

ajaxFileUpload: function(s) {

        // TODO introduce global settings, allowing the client to modify them for all requests, not only timeout  

        s = jQuery.extend({}, jQuery.ajaxSettings, s);

        var id = s.fileElementId;        

  var form = jQuery.createUploadForm(id, s.fileElementId, s.data);

  var io = jQuery.createUploadIframe(id, s.secureuri);

  var frameId = 'jUploadFrame' + id;

  var formId = 'jUploadForm' + id;  

现在参数问题就解决了,这个时候,你可以传入你需要的参数。

问题二:

    运行时报:jQuery.handleError is not a function 错误;

解决办法:

    这个错误是由于ajaxfileupload.js 是在jquery1.4.2版本之前写的,Jquery之后的版本已经没有了handleError 方法,所以可以将1.4.2版本中的该方法复制到该js中。

// handleError 方法在jquery1.4.2之后移除了,此处重写改方法

    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] );

        }

    },


问题三:

    执行完成后,如果返回结果为json格式,则不断报错,这个问题是由于在处理返回的data的时候,对json格式的数据处理不当导致,这个时候修改uploadHttpData方法即可:

uploadHttpData: function( r, type ) {

        var data = !type;

        data = type == "xml" || data ? r.responseXML : r.responseText;

        // ifthe type is "script", eval it in global context

        if( type == "script" )

        {

         jQuery.globalEval( data );

        }

            

        // Get the JavaScript object, ifJSON is used.

        if( type == "json" )

        {

        data = jQuery.parseJSON(jQuery(data).text());

//         eval( "data = " + data );

        }

            

        // evaluate scripts within html

        if( type == "html" )

        {

         jQuery("

").html(data).evalScripts();

        }

            

        return data;

    }


现在可以实现异步上传图片了。

我的js代码:

$("#p_w_picpathInput").change(function(){

var filename = $("#p_w_picpathInput").val();

if(!/\.(gif|jpg|jpeg|png|GIF|JPG|PNG)$/.test(filename)){

alert("You must select a valid p_w_picpath file!");

return false;

}

$.ajaxFileUpload({  

            url: '/web/account!modifyLogoimg.action',  

            secureuri: false,  

            fileElementId: 'p_w_picpathInput',  

            dataType: 'json',

            data : {"filename": filename},

            success: function(data) {  

            if(data.success){

$("#personal_img").attr("src", "/"+data.picpath);

$("#filename_hide").val(data.picpath);

}else{

alert(data.message);

            },  

            error: function(data, status, e) {  

                alert(e);  

            }  

        });

});

html片段:

     

       

The current p_w_picpath:

       

       

       

       

     

     

       

New p_w_picpath:

       

     

     

附件是修改以后的ajaxfileupload.js文件。供大家参考。


本文名称:ajaxfileupload.js实现异步上传图片
文章网址:http://ybzwz.com/article/ghiehh.html