ajaxfileupload.js使用总结，整了两天，大家可以少走点弯路

这两天在做一个图片上传器，整了两天，因为浏览器的兼容性问题，主要还是奇葩的IE，不过一番周折后，最后还是成功兼容IE8+(8以下没有测过)，firefox,chrome等主流浏览器。

做好了效果是这样子的：

 

 

有两层iframe嵌套，图片使用uploadPreview.js做预览，因为原生的input type="file"上传控件样式太丑，

于是把原生的上传控件隐藏<input id="uploadFile" name="file" type="file"  style="display:none"/>,

自己写了个按钮点击的时候去focus()一下就可以弹出文件选择了，然后调用ajaxfileupload.js去上传图片，ok，firefox和chrome测试都通过，很顺利，结果没想到IE果然还是不负众望地挂掉了。

 

第一个问题：

IE首先碰见的是选择图片之后uploadPreview.js不能预览，尝试了各种办法，最后发现ie由于安全机制，

不支持别的按钮去触发<input id="uploadFile" name="file" type="file" />，于是只能去使用原生的了，参照这篇http://www.haorooms.com/post/css_input_uploadmh文章改了一下原生的样式，好看了些，ie可以预览了，紧接着

 

 

第二个问题：

框架使用的是SpringMVC，在IE使用ajaxfileupload.js上传，java的action会返回一个json数据，ajaxfileupload的回掉函数会有一些处理，结果在ie下调用，浏览器直接弹出的是下载。

 贴上原有的方法：

@RequestMapping("ajaxUpload")

@ResponseBody

public JSONObject ajaxUpload(

@RequestParam("file") MultipartFile file,

HttpServletRequest request,

HttpServletResponse response) throws Exception {

JSONObject jsonObject = new JSONObject();

.....

//filePath,处理\\,js不认\\,变成;

parentDir = parentDir.replaceAll("\\" + File.separator, ";");

jsonObject.put("resultMsg", resultMsg);

jsonObject.put("width", widths);

jsonObject.put("_callback", request.getParameter("_callback"));

jsonObject.put("filePath", parentDir + ";" + destFilename);

jsonObject.put("fileName", originalFilename);

return jsonObject;

}

 

 

我的解决方法（为ie专门写了一套）：

@RequestMapping("ajaxUploadIE")

@ResponseBody

public void ajaxUploadIE(

@RequestParam("file") MultipartFile file,

HttpServletRequest request,

HttpServletResponse response) throws Exception {

JSONObject jsonObject = new JSONObject();

....

//filePath,处理\\,js不认\\,变成;

parentDir = parentDir.replaceAll("\\" + File.separator, ";");

jsonObject.put("resultMsg", resultMsg);

jsonObject.put("width", widths);

jsonObject.put("_callback", request.getParameter("_callback"));

jsonObject.put("filePath", parentDir + ";" + destFilename);

jsonObject.put("fileName", originalFilename);

response.setContentType("text/html");

response.getWriter().write(jsonObject.toString()); 

 

}

 

 

 

第三个问题：

在ie下图片开始没有路径的话，会有一个空的边框，borer=0，border-style:none。。。。等等都试了，都不好使，我的最后的做法是，为ie写了一个样式,开始让图片透明，选择了图片之后再用js把图片透明度调回来，显示就正常了。

img{

 filter:alpha(opacity=0);

}

 

 

 

就这些，记录下。