上传直接用struts2的file组件,没有什么困难;最近的项目觉得那个组件太难看,决定再点击一个图片的时候触发上传功能,所以要求html页面商用js动态处理。在做这个功能的时候遇到了信息回传和浏览器支持的问题,下面把解决过程分享一下:
一、信息回传问题
我们知道form表单提交后会刷新页面,而我上传完图片需要将图片显示在原来页面,所以只能局部刷新,不能刷新整个页面。解决思路是在html页面写一个隐藏的iframe,form表单的target值指向iframe的name属性,这样当信息回传的时候只会刷新隐藏的iframe,间接实现了局部刷新。为了将action信息返回html页面,在action层回写一个js方法(方法名前加parent.),同时在html页面也写同样一个方法。这样当信息回写到iframe时,就能够调用其父页面,也就是html中的同名方法,从而将回传信息交由js处理。
二、浏览器兼容问题
由于我这个功能需要再点击图片后弹出上传的组件,选中要上传图片点确定后直接上传,之后要把上传的图片显示在前端页面,并且如果觉得不满意可以删除图片,重新上传。
1、起初想到了如下做法:
点击图片触发file组件的click事件,这样就能弹出上传框;同时为file绑定onchange事件,提交form表单。在测试过程中chrome浏览器是没有问题的,但是万恶的IE对file做了安全处理,不是直接点击上传组件而通过其他方式触发file的click是不允许上传的,瞬间心哇凉了……
2、再接再厉,另一个想法出现了:
既然ie必须通过点击上传组件上传图片,而项目有需要点击图片上传,那只有让它们”合体“了。将file组件绝对定位到要点击的图片上方,同时将组件设置成透明的,这样就可以了。这里还有一个问题,file组件是只读的,意味着我不能修改其value值,如果仅仅用onchange事件触发一次上传并且直接成功是没问题的,但是如果要是需要删除图片重新上传同名图片,那么第二次以后的上传是无法触发的,这里只能是在上传成功后将原file组件删除,在删除图片后重新拼接一个新的file组件……以下是详细代码:
html:我这里有好多file组件,此处只写其中一个
<!--需要点击的图片--> <img id="img1" alt="" src="../images/ui_34.png" style="cursor: pointer;"/> <!--上传成功后回显的图片--> <img id="imgPic1" alt="" style="height: 70px; margin-right: 10px;display: none;" src="" /><<!--删除按钮--> <a id="imgDelete1" href="javascript:void(0)" style="display: none" onclick="imgDelete(1);">删除</a> <form id="form1" name="form_1" action="user_uploadMerchantPic.do" method="post" enctype="mu ltipart/form-data" target="upload1"> <input type="file" id="file1" name="file" value="" onchange="uploadPic(1)" style="position: absolute;left:7px;top:32px;width: 85px;background-color:transparent;opacity:0;cursor: pointer;"> <!--其他参数--> <input id="picType1" type="hidden" name="pic.pic_type" value="1"> </form> <iframe id="uploa1" name="upload1" style='display:none;'></iframe>
struts配置文件:
<action name="user_*" class="userAction" method="{1}"></action>
spring配置文件:
<bean id="userAction" class="UserAction"scope="prototype"></bean>
action:
public class UserAction extends ActionSupport { private static final long serialVersionUID = 5793277634668238368L; private Logger logger = Logger.getLogger(UserAction.class); //商户图片 private ByPaperPic pic; private List<File> file; private List<String> fileFileName; /** * 上传商户图片 */ public void uploadMerchantPic(){ HttpServletRequest request = ServletActionContext.getRequest(); HttpServletResponse response = ServletActionContext.getResponse(); int code = 0; String msg = ""; UploadPicReturnVo reVo = null; PrintWriter out = null; User user = (User)request.getSession().getAttribute(Constant.LOG_USER); int merchantId = 0; //如果是用户自己注册,session中获取用户id if(user.getType() == Constant.UserType.MERCHANT){ merchantId = user.getMerchant().getMerchant_id(); } try { out = response.getWriter(); reVo = userService.uploadMerchantPic(pic, file, fileFileName); code = MessageControl.SUCCESS.getCode(); msg = MessageControl.SUCCESS.getMessage(); } catch (IOException e) { code = MessageControl.UPLOADPICFIELD.getCode(); msg = MessageControl.UPLOADPICFIELD.getMessage(); logger.error("上传图片异常:+e.getMessage()"); e.printStackTrace(); } // 回写的js方法 String str = ""; if(reVo != null && reVo.isFlag()){ str = "<script>parent.successImg("+code+",'"+msg+"',"+1+",'"+reVo.getPic().getPic_path()+"',"+reVo.getPic().getPic_type()+",'"+merchantId+"')</script>"; }else{ str = "<script>parent.successImg("+code+",'"+msg+"',"+0+","+0+","+pic.getPic_type()+",'"+merchantId+"')</script>"; } out.write(str); out.flush(); out.close(); } /** * 删除商户up上的图片 * */ public void deleteMerUpPic() throws IOException{ HttpServletResponse response = ServletActionContext.getResponse(); JSONObject json = new JSONObject(); PrintWriter out = response.getWriter(); userService.deleteMerUpPic(pic); json.put("code", MessageControl.SUCCESS.getCode()); json.put("message", MessageControl.SUCCESS.getMessage()); out.write(json.toString()); out.flush(); out.close(); } public List<File> getFile() { return file; } public void setFile(List<File> file) { this.file = file; } public List<String> getFileFileName() { return fileFileName; } public void setFileFileName(List<String> fileFileName) { this.fileFileName = fileFileName; } public ByPaperPic getPic() { return pic; } public void setPic(ByPaperPic pic) { this.pic = pic; } }
html上的js代码:
function uploadPic(num){ var filepath = $("#file"+num).val(); var picPett = filepath.substring(filepath.lastIndexOf(".")+1,filepath.length).toLowerCase(); if(picPett != "bmp" && picPett != "jpg" && picPett != "gif" && picPett != "png" && picPett != "jpeg"){ alert("只能上传bmp,jpg,gif,png和jpeg格式的图片!"); return false; } //num参数作为form的标识号,同时与图片类型保持一致 $("#form"+num).submit(); }
//上传成功回返函数 function successImg(code,msg,flag,path,type,m_id){ if(code == 1){ if(flag == 1){ $("#img"+type).hide(); //file控件为只读,为了删除后还能上传,此处将其删掉 $("#file"+type).remove(); $("#imgPic"+type).attr("src",path); $("#imgPic"+type).show(); $("#imgDelete"+type).show(); }else{ $("#file"+type).remove(); $("#form"+type).prepend('<input type="file" id="file'+type+'" name="file" value="" onchange="uploadPic('+type+')" style="position: absolute;left:7px;top:32px;width: 85px;background-color:transparent;opacity:0;cursor: pointer;">'); alert("文件服务器链接异"); }else{ $("#file"+type).remove(); $("#form"+type).prepend('<input type="file" id="file'+type+'" name="file" value="" onchange="uploadPic('+type+')" style="position: absolute;left:7px;top:32px;width: 85px;background-color:transparent;opacity:0;cursor: pointer;">'); alert("系统出现异常,"+msg); } } //删除tupian function imgDelete(num){ var data = {"pic.pic_path":$("#imgPic"+num).attr('src')} loadData("user_deleteMerUpPic.do",data,"delete",num); }
function loadData(url,dt,type,num) { starMask("正在执行..."); $.ajax({ url:url, type:"post", cache:false, async:true, data:dt, dataType:"json", error:function(xhr,status,err){ endMask(); window.location.href = '../error.html'; }, success:function(data){ if (data.code == 1) { if(type == "delete"){ $("#img"+num).show(); $("#imgPic"+num).attr("src",""); $("#file"+num).val(""); //file控件为只读,此处重新建一个 $("#form"+num).prepend('<input type="file" id="file'+num+'" name="file" value="" onchange="uploadPic('+num+')" style="position: absolute;left:7px;top:32px;width: 85px;background-color:transparent;opacity:0;cursor: pointer;">'); $("#imgPic"+num).hide(); $("#imgDelete"+num).hide(); }else{ alert("系统内部错误,请稍后再试!"); return false; } } }); }
上面是我部分代码的截取,肯定有不合适的地方,比方确实的变量和html元素等等,但是主流程和重要的信息都是没有问题的,有不妥的地方,望指正!
相关推荐
本示例通过"java跨全域兼容ie/ff/chrome浏览器多文件上传(原创)"的标题,我们可以看出这是一个解决浏览器兼容性问题并实现跨域文件上传的解决方案。下面将详细解释这个主题涉及的关键知识点。 1. **跨域资源共享 ...
在本文中,我们将深入探讨如何使用SpringBoot与WebUploader实现大文件的切片上传功能,同时确保兼容性,包括对IE8+及Chrome等主流浏览器的支持。这一技术方案对于处理大容量文件上传,提高用户体验,以及优化服务器...
### js判断上传文件的大小(兼容火狐、谷歌、IE、360浏览器) 在Web开发中,经常需要处理用户上传文件的操作。为了确保服务器安全并优化用户体验,开发者需要对上传文件进行一定的预处理,例如限制文件大小。本文将...
chrome等浏览器由于安全机制,采用了文件索引的方式,不允许直接操作本地文件。 功能介绍 通过链接可以访问本地目录、共享目录、本地文件、共享文件(支持所有浏览器) 优化点 1、支持中文路径 2、支持文件夹...
标题涉及的问题是在使用Internet Explorer(IE)或Microsoft Edge浏览器通过Shared Access Signature(SAS)访问Azure File Storage中的文件时遇到的。当尝试通过SAS URL多次访问同一个File Storage文件时,IE和Edge...
总的来说,这次修改让jQuery Uploadify.js插件能够更好地适应不断变化的浏览器环境,确保在广泛的用户群体中提供一致的文件上传体验。对于使用C#作为后端语言的项目来说,你需要确保服务器端的接口能够正确接收和...
这段代码是用于在图片上传前实现预览功能的,它兼容了Internet Explorer(IE)、Chrome 和 Firefox 这三种主流浏览器。在用户选择图片文件后,可以在网页上显示一个缩放后的预览图,确保预览图像的宽度和高度不超过...
在JavaScript中,读取Excel文件(.xls)并兼容多种浏览器,如Chrome、IE和Firefox,是一项常见的需求。这通常涉及到文件API、ActiveXObject(针对IE)和第三方库的使用。下面将详细介绍如何实现这一功能。 首先,...
这个资源"2014-5-6更新 兼容ie[6-9]、火狐、Chrome、opera、maxthon3、360浏览器的js本地图片预览"提供了一个JavaScript解决方案,用于实现一个功能强大的本地图片预览功能,它能在多种主流浏览器中正常工作,包括...
下面是file上传控件在IE10,firefox16,chrome22,opera12,safari5.1.7里的截图: 在IE10里,双击输入框或者单击按钮都弹出文件选择框。在其他浏览器里单击输入框,按钮或文字都可以触发文件选择框。 鉴于这种...
上传前预览图片 兼容ie6.7.8.9 ff 谷歌 opera 苹果浏览器",表明这是一个旨在解决浏览器兼容性问题的解决方案,涵盖了老版本的Internet Explorer(IE6到IE9)以及Firefox、Chrome、Opera和Safari等主流浏览器。...
在网页中嵌入Window Media Player(WMP)插件,以支持Internet Explorer(IE)和Google Chrome浏览器,是一项常见的多媒体内容展示技术。由于WMP在现代浏览器中的兼容性问题,尤其是对非IE浏览器的支持,这一过程...
本示例主要探讨如何使用JavaScript结合IFrame技术来实现异步图片上传,并提供预览功能,同时确保兼容Firefox、Chrome和IE9等主流浏览器。 首先,我们需要了解异步上传的基本原理。异步上传,也称为Ajax上传,是指在...
由于Flash的广泛安装基础,这种方法可以在大多数现代计算机上运行,从而解决了IE、Firefox、Chrome、Safari等不同浏览器间的上传兼容性问题。 以下是关于SWFUpload的一些关键知识点: 1. **初始化设置**:...
对于非图片文件,可能需要借助第三方库如PDF.js来实现预览。 5. **进度条显示**:为了提供良好的用户体验,多文件上传通常会显示上传进度。这可以通过监听XMLHttpRequest的progress事件实现。 6. **错误处理**:...
本文将详细探讨如何在ASP环境下结合JQuery.Uploadify实现文件上传,并关注其在主流浏览器以及IE8以上的兼容性。 **1. 安装与引入Uploadify** 首先,你需要下载JQuery.Uploadify插件的压缩包,解压后将包含的`...
1. 解压 PDF前端预览功能.zip 压缩包,复制到网站开发目录; 2. 调用方式:window.open("Scripts/lib/PDF/web/viewer....3. 能支持多种浏览,火狐、IE、谷歌、360等,能支持本地文件直接浏览。
由于使用了浏览器内置的文件API,这种方法在IE10及以上版本,以及Chrome、360等现代浏览器中都能正常工作。需要注意的是,对于IE9及以下版本,可能需要使用ActiveXObject来实现类似功能,但这已经不再推荐,因为这些...
Internet Explorer(IE)作为一款曾经占据市场主导地位的浏览器,在其不同版本间存在较大的差异,尤其是与现代浏览器如Chrome、Firefox等相比,在对Web标准的支持上存在诸多不足。因此,在早期Web开发中,能够准确...
在现代浏览器中,如Chrome、Firefox或Safari,我们可以利用HTML5的`<input type="file">`元素配合`FileReader` API来实时预览用户选择的图片。但在IE6、7和8中,由于不支持这些新特性,我们需要采取不同的策略。 ...