【分享】兼容ie6-9和现代浏览器以及ios，android，pad等触屏设备的异步文件上传插件
来源：互联网 发布：java 书籍推荐 编辑：程序博客网 时间：2024/06/05 15:53
核心代码
/** * 该插件用于兼容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();}html代码
<%@ 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>上传处理代码
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><%@ page import="java.util.*,java.io.*" %><%@ page import="java.text.SimpleDateFormat" %><%@ page import="org.apache.commons.fileupload.*" %><%@ page import="org.apache.commons.fileupload.disk.*" %><%@ page import="org.apache.commons.fileupload.servlet.*" %><%@ page import="com.alibaba.fastjson.JSONObject" %><% /** * KindEditor JSP * * 本JSP程序是演示程序，建议不要直接在实际项目中使用。 * 如果您确定直接使用本程序，使用之前请仔细确认相关安全设置。 * *///文件保存目录路径 String savePath = application.getRealPath("/") + "uploads/";//文件保存目录URL String saveUrl = request.getContextPath() + "/uploads/"; System.out.println(savePath);//定义允许上传的文件扩展名 HashMap<String, String> extMap = new HashMap<String, String>(); extMap.put("image", "gif,jpg,jpeg,png,bmp"); extMap.put("flash", "swf,flv"); extMap.put("media", "swf,flv,mp3,wav,wma,wmv,mid,avi,mpg,asf,rm,rmvb"); extMap.put("file", "doc,docx,xls,xlsx,ppt,htm,html,txt,zip,rar,gz,bz2");//最大文件大小 long maxSize = 1000000; response.setContentType("text/html; charset=UTF-8"); if(!ServletFileUpload.isMultipartContent(request)){ out.println(getError("请选择文件。")); return; }//检查目录 File uploadDir = new File(savePath); if(!uploadDir.isDirectory()){ uploadDir.mkdirs(); } if(!uploadDir.isDirectory()){ out.println(getError("上传目录不存在。")); return; }//检查目录写权限 if(!uploadDir.canWrite()){ out.println(getError("上传目录没有写权限。")); return; } String dirName = request.getParameter("dir"); if (dirName == null) { dirName = "image"; } if(!extMap.containsKey(dirName)){ out.println(getError("目录名不正确。")); return; }//创建文件夹 savePath += dirName + "/"; saveUrl += dirName + "/"; File saveDirFile = new File(savePath); if (!saveDirFile.exists()) { saveDirFile.mkdirs(); } SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMdd"); String ymd = sdf.format(new Date()); savePath += ymd + "/"; saveUrl += ymd + "/"; File dirFile = new File(savePath); if (!dirFile.exists()) { dirFile.mkdirs(); } FileItemFactory factory = new DiskFileItemFactory(); ServletFileUpload upload = new ServletFileUpload(factory); upload.setHeaderEncoding("UTF-8"); List items = upload.parseRequest(request); Iterator itr = items.iterator(); while (itr.hasNext()) { FileItem item = (FileItem) itr.next(); String fileName = item.getName(); long fileSize = item.getSize(); if (!item.isFormField()) { //检查文件大小 if(item.getSize() > maxSize){ out.println(getError("上传文件大小超过限制。")); return; } //检查扩展名 String fileExt = fileName.substring(fileName.lastIndexOf(".") + 1).toLowerCase(); if(!Arrays.<String>asList(extMap.get(dirName).split(",")).contains(fileExt)){ out.println(getError("上传文件扩展名是不允许的扩展名。\n只允许" + extMap.get(dirName) + "格式。")); return; } SimpleDateFormat df = new SimpleDateFormat("yyyyMMddHHmmss"); String newFileName = df.format(new Date()) + "_" + new Random().nextInt(1000) + "." + fileExt; try{ File uploadedFile = new File(savePath, newFileName); item.write(uploadedFile); }catch(Exception e){ out.println(getError("上传文件失败。")); return; } JSONObject obj = new JSONObject(); obj.put("error", 0); obj.put("url", saveUrl + newFileName); out.println(obj.toJSONString()); } }%><%! private String getError(String message) { JSONObject obj = new JSONObject(); obj.put("error", 1); obj.put("message", message); return obj.toJSONString(); }%> 0 0
- 【分享】兼容ie6-9和现代浏览器以及ios，android，pad等触屏设备的异步文件上传插件
- 浏览器兼容的文件上传
- 图片上传预览，兼容IE6、IE7、IE8和firefox浏览器
- android 设置支持pad等大屏幕、大分辨率的设备！！
- 兼容IE6+,firefox等主流浏览器的透明度代码
- 兼容IE6-9,FF,Chrome等主流浏览器的宽高自适应的九宫格
- Android pad设备的id
- 考虑浏览器兼容的文件上传
- 基于ajaxFileUpload，兼容ie7以上、chrome等浏览器的文件上传功能
- 分享一个帮助你自定义标签并且兼容现代浏览器的javascript类库 : X-tag
- CSS兼容IE6、IE7、IE8和Firefox浏览器的方法
- [CSS]IE6和360浏览器兼容模式下的兼容性问题
- 记录——全浏览器兼容的图片上传插件
- 用div和ul标签画表格进行布局兼容火狐、ie6、ie7、Opera等浏览器
- div+css 兼容ie6 ie7 ie8 ie9和FireFox Chrome等浏览器方法
- div+css 兼容ie6 ie7 ie8 ie9和FireFox Chrome等浏览器方法
- div+css 兼容ie6 ie7 ie8 ie9和FireFox Chrome等浏览器方法
- div+css 兼容ie6 ie7 ie8 ie9和FireFox Chrome等浏览器方法
- Eclipse上安装SpringIDE
- CALayer分类
- 实现AIDL接口的Binder连接池
- 数据库大小,表大小及行数统计
- struts2的s：iterator 标签 详解
- 【分享】兼容ie6-9和现代浏览器以及ios，android，pad等触屏设备的异步文件上传插件
- 不需要显示地图 就获得用户当前经纬度 超简单的方法
- 时间复杂度
- 项目报_SecPolicyCreateSSL错误
- zookeeper之watcher机制
- 关于Android Studio项目的Gradle构建
- springmvc4 spring4 swagger配置问题
- hive-sqoop案例
- NSArray分类
