用了一下ajaxFileUpload老是出现这样或那样的问题,修改里面的配置也不起作用,知道了其中原理自己就大改了一下,
ajaxFileUpload的上传原理是在页面中追加一个表单和iframe,上传的图片克隆到追加的表单中,返回结果存在iframe中;其中总是出问题的地方在返回结果处理这一块。
本人是搞后台开发的不是专业前段工程师,就用到了jquery.form.js,这个插件没什么兼容问题,而且也经常使用,于是就把表单提交这一块交给jquery.form来处理,其他全部去掉。
上代码ajaxFileUpload.js:
jQuery.extend({ createUploadForm: function (id,fileElementId,data,textareas) { var formId = 'cwUploadForm' + id; var fileId = 'cwUploadFile' + id; var form = jQuery('<form action="" method="POST" name="' + formId + '" id="' + formId + '" enctype="multipart/form-data"></form>'); if (data) { for (var i in data) { jQuery('<input type="hidden" name="' + i + '" value="' + data[i] + '" />').appendTo(form); } } if (textareas) { for (var i in textareas) { jQuery('<textarea name="' + i + '">'+textareas[i]+'</textarea>').appendTo(form); } } var oldElement = jQuery('#' + fileElementId); var newElement = jQuery(oldElement).clone(); jQuery(oldElement).attr('id',fileId); jQuery(oldElement).before(newElement); jQuery(oldElement).appendTo(form); jQuery(form).css('position','absolute'); jQuery(form).css('top','-1200px'); jQuery(form).css('left','-1200px'); jQuery(form).appendTo('body'); return form; },ajaxFileUpload: function (s) { var defaults = {fileElementId: 'image',data:false,textareas: false,beforeSubmit: false,success:false,error:false}; var opts = jQuery.extend(defaults,s); var id = new Date().getTime(); var form = jQuery.createUploadForm(id,opts.fileElementId,(typeof(opts.data) == 'undefined' ? false : opts.data),(typeof(opts.textareas) == 'undefined' ? false : opts.textareas)); var formId = 'cwUploadForm' + id; var form = jQuery('#' + formId); jQuery(form).attr('action',opts.url); jQuery(form).attr('method','POST'); if (form.encoding) { jQuery(form).attr('encoding','multipart/form-data'); } else { jQuery(form).attr('enctype','multipart/form-data'); } jQuery(form).ajaxSubmit({ dataType : 'json',type:'post',beforeSubmit: opts.beforeSubmit,success : opts.success,error : opts.error }); setTimeout(function () { try { jQuery(form).remove(); } catch (e) { } },100) } })
<script src="jquery.form.min.js"></script> <script type="text/javascript"> function ajaxFileUpload() { $.ajaxFileUpload({ url: 'http://${domain}/uploadImage',data: {"mark": "ask"},fileElementId: 'uploadImg',beforeSubmit: function(a,f,o) { //做一些上传前的操作:加载中、校验等 },success : function(data) { alert(data.success); alert(data.url); },error : function(data) { alert("上传出错"); } }); return true; } </script> <input type="file" name="imgFile" id="uploadImg" onchange="return ajaxFileUpload();" >
到此结束,非前端工程师目前只能做成这样了,欢迎大家改进
原文链接:https://www.f2er.com/ajax/162823.html