1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 | /** * 该插件用于兼容ie6-7-8-9及现代浏览器的异步上传文件。 * 请注意，在ie6-7-8-9上面的原理是： * 新添加一个表单和一个iframe，然后每次选择都将file输入框复制到该表单上面，然后submit整个表单，这样就可以实现类似ajax提交文件的效果， * 但是有一点是没办法处理的，就是在客户端预览图片及判断文件大小。现代浏览器则可以。 */var AjaxFileInput=function(opts){ var settings={ container:"" //放置input框的容器 ,inputFileElement:"" //input file的文件输入框的elemnt，可以是jquery元素，也可以是dom元素。 请注意，由于每次上传重新生成一个input输入框到container里面，所以建议container里面除了file输入框什么都别放了。 ,onValidate:function(fileName,fileDom){ return true; } //这是选择文件之后的验证逻辑。假如返回true的话，那么就可以继续上传图片到服务端的某个url，否则不执行。 ,max_size:5*1024*1024 //限制上传大小--注意，在ie6-9上面是没办法在客户端获取尺寸的，所以这种时候这个属性相当于没用。 ,url:"" //上传时候的url。 ,beforeUpload:function(paras){ }//上传文件之前会调用这个方法。你可以返回一个Object来，譬如：{birthday:"2016-2-05"}这样，假如有这种形式的参数，那么无论在兼容模式下面还是google等现代浏览器的正常模式下面，该参数都会添加到表单然后上传上去。 ,onError:function(errorMsg){ } ,onComplete:function(serverResult){ } }; $.extend(settings,opts); var _container=$(settings.container); var _currentFileButton={}; _currentFileButton=$(settings.inputFileElement); var _tpl_file_html=_container.html(); //获取文本框的html，为以后替换新的文本框而做准备。 var userIEMode=false; if(window.FileReader==undefined){ userIEMode=true; } var innerTools={ getBase4FromImgFile:function(file,callBack){ var reader = new FileReader(); reader.onload = function(e) { var base64Img= e.target.result; //var $img = $('<img>').attr("src", e.target.result) //$('#preview').empty().append($img) if(callBack){ callBack(base64Img); } }; reader.readAsDataURL(file); } }; var _rid="rid_"+util.getRandomWords(5)+"_"+new Date().getTime(); var _form_id="form_"+_rid; var _ifr_id="ifr_"+_rid; var el_iframe={}; var el_form={}; var isBusy=false; var _i_app={ init:function(){ var me=this; if(userIEMode){ me.initIEForm(); } me.resetFileInput(settings.inputFileElement); } //--生成ie6-9必须的form表单和iframe来进行ajax异步提交。 ,initIEForm:function(){ var me=this; var _ifr_html='<iframe id="__ifr_id__" name="__ifr_id__" style="position: absolute; opacity: 0.0; visibility: visible; left:0;top:0; width:100px; height: 50px;"></iframe>'; _ifr_html=_ifr_html.replace(/__ifr_id__/g,_ifr_id); var _form_html='<form id="__form_id__" action="__url__" target="__ifr_id__" method="post" enctype="multipart/form-data" style="border: 1px solid;" ></form>'; _form_html=_form_html.replace(/__ifr_id__/g,_ifr_id); _form_html=_form_html.replace(/__form_id__/g,_form_id); _form_html=_form_html.replace(/__url__/g,settings.url); el_form=$(_form_html); el_iframe=$(_ifr_html); $(document.body).append(el_form); $(document.body).append(el_iframe); //--初始化iframe为ajax的相关操作。 me.initIFrameLoaded(); } //--初始化iframe onload的相关事件。 ,initIFrameLoaded:function(){ var me=this; var ifr_json=document.getElementById(_ifr_id); function handle_return(){ var doc = ifr_json.contentDocument || ifr_json.document; var _json_str=doc.body.innerText; var res={}; try{ res=JSON.parse(_json_str); isBusy=false; var _new_file_input=$(_tpl_file_html); me.resetFileInput(_new_file_input); _container.empty().append(_new_file_input); settings.onComplete(res); } catch(ex){ res=_json_str; isBusy=false; var _new_file_input=$(_tpl_file_html); me.resetFileInput(_new_file_input); _container.empty().append(_new_file_input); settings.onError(_json_str); } } if (ifr_json.attachEvent){ ifr_json.attachEvent("onload", function(){ handle_return(); }); } else { ifr_json.onload = function(){ handle_return(); }; } } //--上传，用iframe及form方式。 ,uploadByForm:function(paras){ var me=this; el_form.empty(); el_form.append('<input type="submit" value="提交">'); for(var key in paras){ var _hide_val=$('<input type="hidden" value="" name="'+key+'">'); _hide_val.val(paras[key]); el_form.append(_hide_val); } if(util.checkEmpty(_currentFileButton.attr("name"))){ _currentFileButton.attr("name","file"); } el_form.append(_currentFileButton); setTimeout(function(){ el_form[0].submit(); },20); } ,uploadByHttpRequest:function(paras){ var me=this; var file=$(_currentFileButton)[0].files[0]; var xhr = new XMLHttpRequest(); function uploadFile() { var fd = new FormData(); var _uploadKey="file"; if(util.checkEmpty(_currentFileButton.attr("name"))==false){ _uploadKey=_currentFileButton.attr("name"); } fd.append(_uploadKey, file); for(var key in paras){ fd.append(key,paras[key]); } xhr.upload.addEventListener("progress", uploadProgress, false); xhr.addEventListener("load", uploadComplete, false); xhr.addEventListener("error", uploadFailed, false); xhr.addEventListener("abort", uploadCanceled, false); xhr.open("POST", settings.url); xhr.send(fd); } function uploadProgress(evt) { if (evt.lengthComputable) { var percentComplete = Math.round(evt.loaded * 100 / evt.total); //uploadItemObject.setProgress(percentComplete); //document.getElementById('progressNumber').innerHTML = percentComplete.toString() + '%'; } else { //document.getElementById('progressNumber').innerHTML = 'unable to compute'; //uploadItemObject.setStateTips("未知上传进度"); } } function uploadComplete(evt) { /* This event is raised when the server send back a response */ //alert(evt.target.responseText); /*1.xhr.readyState:XMLHttpRequest狀態，等於4表示數據已經接收完畢 2.xhr.status:狀態碼，200表示正常 3.xhr.responseText:server回應的文字數據*/ //console.log(evt.target.status); //console.log(evt.target.readyState); //console.log(xhr.status); if(evt.target.status!=200){ isBusy=false; var _new_file_input=$(_tpl_file_html); me.resetFileInput(_new_file_input); _container.empty().append(_new_file_input); settings.onError(evt.target.status+"错误"); //uploadItemObject.showError(evt.target.status+"错误"); } else{ var res_json=""; try{ res_json=JSON.parse(evt.target.responseText); isBusy=false; var _new_file_input=$(_tpl_file_html); me.resetFileInput(_new_file_input); _container.empty().append(_new_file_input); settings.onComplete(res_json); } catch(ex){ res_json=evt.target.responseText; isBusy=false; var _new_file_input=$(_tpl_file_html); me.resetFileInput(_new_file_input); _container.empty().append(_new_file_input); settings.onError(res_json); } } } function uploadFailed(evt) { //alert("There was an error attempting to upload the file."); //uploadItemObject.showError(); settings.onError("上传失败"); } function uploadCanceled(evt) { //alert("The upload has been canceled by the user or the browser dropped the connection."); //uploadItemObject.showError(); } uploadFile(); isBusy=false; var _new_file_input=$(_tpl_file_html); me.resetFileInput(_new_file_input); _container.empty().append(_new_file_input); } //--重新设定上传按钮事件，请注意，假如要hack onchange事件的话，那么这个方法调用是必不可少的。 ,resetFileInput:function(__file_input){ var me=this; var _fileInput=$(__file_input); var _fileDom=_fileInput[0]; _currentFileButton=_fileInput; $(_fileInput).change(function(){ //if(isBusy){ // return; //} //isBusy=true; var _fake_path=_fileDom.value; var __theFileName=""; if(util.checkEmpty(_fake_path)){ } else{ if(_fake_path.indexOf("\\")!=-1){ var arr2=_fake_path.split("\\"); __theFileName=arr2[arr2.length-1]; } else if(_fake_path.indexOf("/")!=-1){ var arr2=_fake_path.split("/"); __theFileName=arr2[arr2.length-1]; } } if(settings.onValidate(__theFileName,_fileDom)==false){ isBusy=false; var _new_file_input=$(_tpl_file_html); me.resetFileInput(_new_file_input); _container.empty().append(_new_file_input); return; } if(util.checkEmpty(_fake_path)==true){ var _new_file_input=$(_tpl_file_html); me.resetFileInput(_new_file_input); _container.empty().append(_new_file_input); return; } var _paras={ }; settings.beforeUpload(_paras); if(userIEMode){ me.uploadByForm(_paras); } else{ me.uploadByHttpRequest(_paras); } }); } }; _i_app.init();} |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 | <%@ page contentType="text/html;charset=UTF-8" language="java" %><html><head> <title></title> <jsp:include page="inc.js.jsp"></jsp:include> <script type="text/javascript" src="/static/vendor/AjaxFileInput/main.js"></script></head><body><h1>file input文件上传插件兼容处理---兼容ie6-11，chrome，ff，ipad，ios及安卓</h1><input type="hidden" class="ipt" name="identityimagefront" id="identityimagefront"> <div style="position: relative;"> <img style="width: 108px; height: 108px;;" id="preview-front" ></span> <div id="front-container" style="position: absolute; left:0;top:0; opacity:0.0; width:108px;height:108px; cursor: pointer;border:1px solid green;background-color: slategray;"> <input type="file" id="file-chooser-front" style=" position: absolute; left:0;top:0; opacity:0.0; width:100%;height:100%; cursor: pointer; "/> </div> </div><p class="tip mb10 ml90">支持 jpg , png , gif 大小在5M以内的图片</p><script> AjaxFileInput({ container:$("#front-container") ,inputFileElement:$("#file-chooser-front") ,url:"/service/singleImageUpload.jsp" ,onError:function(errorMsg){ var _notice=new NotificationFx({ type:"error" ,message:errorMsg }); _notice.show(); } ,onValidate:function(__theFileName,_fileDom){ if(util.checkEmpty(__theFileName)){ var _notice=new NotificationFx({ type:"error" ,message:"请选择图片" }); _notice.show(); return false; } if(!new RegExp("(jpg|jpeg|gif|png|bmp)+","gi").test(__theFileName)){ //alert("照片上传：文件类型必须是JPG、JPEG、PNG或GIF!"); var _notice=new NotificationFx({ type:"error" ,message:"只支持jpg、jpeg、gif、png、bmp等图片格式。" }); _notice.show(); return false; } if(_fileDom.files!=null&&_fileDom.files.length>0){ var oFile=_fileDom.files[0]; if(oFile.size>1024*1024*5){ //alert(settings.outOfSizeTips); var _notice=new NotificationFx({ type:"error" ,message:"最大只能上传5Mb的图片" }); _notice.show(); return false; } } return true; } ,onComplete:function(jsonObj){ if(jsonObj.error==0){ var _notice=new NotificationFx({ type:"success" ,message:"成功上传" }); _notice.show(); $("#preview-front").attr("src",jsonObj.url); } else{ var _notice=new NotificationFx({ type:"error" ,message:"格式错误" }); _notice.show(); } } });</script></body></html> |
联系客服
