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, 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("<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,
fileElementId: 'imageInput',
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片段：
<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>
<dl>
<dt>New image:</dt>
<dd><a href="javascript:void(0);"><input type="file" name="picture" id="imageInput" /></a></dd>
</dl>
</form>
附件是修改以后的ajaxfileupload.js文件。供大家参考。