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, 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,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文件。供大家参考。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |