这两天在做一个图片上传器,整了两天,因为浏览器的兼容性问题,主要还是奇葩的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);
}
就这些,记录下。
相关推荐
ajaxfileupload.js用于文件上传
ajaxfileupload.js, jquery异步文件上传插件
此为前端进行文件上传,使用Ajax方式提交的js插件,使用方便简洁,开发很高效。
1、jquery异步上传图片 2、js前端异步上传图片 3、下载免费 4、功能已测试可以使用
NULL 博文链接:https://zhaixp1949.iteye.com/blog/2260109
使用Jquery做上传文件处理时,用到了ajaxfileupload.js 这个第三方代码,但是这个js几乎就是半成品,问题很多。现在整理如下并附修复版的ajaxfileupload.js下载。 问题: 1:无法带参数提交,只能上传文件; 2:...
JSP使用ajaxFileUpload.js实现跨域问题.docx
通过修改终于使得ajaxfileupload兼容jquery3,代码已上线运行。
ajaxfileupload.js 兼容IE
ajax上传文件必须js文件,修复其中缺少handleError方法,json处理带有<pre></pre>,问题,亲测可以,直接引用即可!
ajaxfileupload.js 异步上传jquery插件,亲测可用,有需要的可以选择下载
折腾了一天,亲自调试完成亲测jquery+ajaxfileupload+demo
ajaxfileupload.js 上传文件不报错版本! 放心使用!! 平时自己用的
博文 http://blog.csdn.net/qq_34273222/article/details/54428580 中所需要的js文件,如有问题请在博客留言。
优化过的ajaxfileupload.js文件 兼容IE,但是用的时候需要引用jquery1.8左右 不能用1.9以上版本
ajaxFileUpload.js详情参考 https://blog.csdn.net/qq_36135335/article/details/85124473