Ajaxfileupload 在IE9下用按钮触发file上传控件,请求无法触发的问题
2017-11-24 10:12
465 查看
很多系统为了美观,都会在网页中用一个隐藏的按钮触发file上传控件,一般正常的在Chrome和Firefox下没有问题,但是切换到IE9和IE10下请求无法到达后台,这是因为IE9和IE10为了安全考虑,阻止了不是直接点击file的上传。因为这个问题,折腾了一天,参考网上的案例,结合自己的实际情况,终于找到一个比较靠谱的解决方案。
用一个label标签,label的for属性指向file文本框
<input type="file" id="uploadfile" name="file" style="display:none;" onclick="upload();" />
<label for="uploadfile"></label>
label的样式可以自己调整
每次上传时,点击label标签,就可以直接触发file控件。
我这里因为用的是jquery.ajaxfileupload.js的上传插件,因此在IE下还有一个问题,就是清空file文件框的值时,总是无法清空,导致二次上传时,无法触发文件框的change事件。
因此用了另外一个清空文件框内容的方法
var clearFileInput = function(name) {
var f = $("input[name='"+name+"']:file");
f.val("");
var cf = f.clone();
f.remove();
cf.appendTo("body");
};
还有一个是在IE9下如果用springmvc的框架,在后台直接输出json的话,前台会直接去下载json文件,解决办法是用HttpServletResponse对象向页面写入数据,并设置数据类型为text/html。
用一个label标签,label的for属性指向file文本框
<input type="file" id="uploadfile" name="file" style="display:none;" onclick="upload();" />
<label for="uploadfile"></label>
label的样式可以自己调整
每次上传时,点击label标签,就可以直接触发file控件。
我这里因为用的是jquery.ajaxfileupload.js的上传插件,因此在IE下还有一个问题,就是清空file文件框的值时,总是无法清空,导致二次上传时,无法触发文件框的change事件。
因此用了另外一个清空文件框内容的方法
var clearFileInput = function(name) {
var f = $("input[name='"+name+"']:file");
f.val("");
var cf = f.clone();
f.remove();
cf.appendTo("body");
};
还有一个是在IE9下如果用springmvc的框架,在后台直接输出json的话,前台会直接去下载json文件,解决办法是用HttpServletResponse对象向页面写入数据,并设置数据类型为text/html。
相关文章推荐
- ajaxfileupload 控件IE9 上传变下载JSON问题
- 解决在Safari、IE高版本中采用自定义选择文件按钮ajaxFileUpload不能上传问题
- jquery ajaxfileupload 上传控件 Uncaught SyntaxError: Unexpected token < 问题
- 解决使用ajaxFileUpload上传控件出现的问题:回调函数总是进入error或success
- 最近使用ajaxFileUpload和Jcrop来实现图片上传和截图,出现一个图片无法更换的问题
- asp.net结合ajaxfileupload控件上传文件一直提示undefined问题
- 使用ajaxfileupload.js上传无法进回调问题终极解决
- 针对IE 安全问题file无法上传的问题 ajaxFileUpload
- ajaxFileupload.js修复上传无法携带参数,返回json格式不准确问题
- ajaxFileUpload 上传文件/图片,传参数,解决第二次无法上传问题
- jquery ajaxfileupload文件上传类型问题
- ASP.NET - Ajax UpLoadFile 多个大文件上传控件及应用范例
- jQuery-File-Upload外部按钮触发上传
- [原创]Ajax UpLoadFile 多个大文件上传控件及应用范例
- ajaxfileUpload.js 上传文件 IE浏览器提示下载json的问题
- DTCMS中部分IE8不支持webupload上传附件的控件,更改为ajaxfileupload
- 使用ajaxFileUpload插件上传带中文名称的上传和下载问题
- AjaxUpLoadFile实现多个大文件上传控件及实例代码
- [原创]Ajax UpLoadFile 多个大文件上传控件,已更新。
- Jeffrey Zhao写的AjaxFileUploadHelper控件问题