欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

点击图片上传file文件，适应IE，chrome等浏览器

程序员文章站 2022-06-09 19:50:08
...

上传直接用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元素等等，但是主流程和重要的信息都是没有问题的，有不妥的地方，望指正！

 

 

 

相关标签： file IE 兼容 上传 点击图片

上一篇： 程序员遇到bug后的反应 程序员bug冲突兼容

下一篇： Nagios下载&安装&配置

推荐阅读