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('<form action="" method="POST" name="' + formId + '" id="' + formId + '" enctype="multipart/form-data"></form>');

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) {

$('<input type="hidden" name="' + i + '" value="' + data[i] + '" />').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,0)">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,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("<div>").html(data).evalScripts();

return data;

}

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

我的js代码：

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

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

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

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

return false;

}

$.ajaxFileUpload({

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

secureuri: false,serif; font-size:14px; line-height:28px"> fileElementId: 'imageInput',serif; font-size:14px; line-height:28px"> dataType: 'json',serif; font-size:14px; line-height:28px"> data : {"filename": filename},serif; font-size:14px; line-height:28px"> success: function(data) {

if(data.success){

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

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

}else{

alert(data.message);

},serif; font-size:14px; line-height:28px"> error: function(data,e) {

alert(e);

}

});

});

html片段：

<form action="" method="post" enctype="multipart/form-data" id="image_form" >

<dl>

<dt>The current image:</dt>

<dd id="imagePreview">

<img id="personal_img" src="" />

<input type="hidden" value="" name="filename" id="filename_hide">

</dd>

</dl>

<dt>New image:</dt>

<dd><a href="javascript:void(0);"><input type="file" name="picture" id="imageInput" /></a></dd>

</form>

下载ajaxfileupload.js

连接时是修改以后的ajaxfileupload.js文件下载地址。供大家参考。