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

ghjcduhvfyjhbf 2015-09-24

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

做好了效果是这样子的:


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


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

有两层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);

}

就这些,记录下。

相关推荐