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

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