IE兼容笔记（一）：兼容IE9表单上传文件

几年前做兼容IE8的pc端项目的时候就遇到文件上传的需求，当时也是查看文档来解决IE9以下不支持formData的问题。由于之前没有写博客的习惯，最近又遇到这样的需求，所以写出来想帮助需要用到的朋友。

本身文件上传不难，只需要注意一些细节：

用最初的表单提交的方式form.submit()
<input type='file'> onchange问题
点击<input type='file'>问题
提交表单后跳转问题

一，用最初的表单提交的方式form.submit()

在IE9中不支持formData对象，无法使用ajax上传文件，所以通过在一个form表单中直接提交到服务器上传。

<form><input type="file">
</form>
<button onclick="submit()">上传</button><script>function submit() {var form = document.forms[0]form.submit()}
</script>

注意：如果要获取file的内容，主流浏览器可以通过获取input对象e.files[0]拿到，在IE9以下由于安全策略的因素不支持直接获取，但是可以通过微软在IE浏览器下支持的ActiveXObject对本地文件进行操作(有关ActiveXObject对象的了解可以点击这里)，例如可以像下面这样拿到文件大小：

<script>var path = '' // 这里是你的文件路径 var fso = new ActiveXObject('Scripting.FileSystemObject')var fileSize = fso.GetFile(path).sizeconsole.log('文件大小是：', fileSize)
</script>

二，<input type='file'> onchange问题

有时候需要在选择完文件立马上传，这是可以在标签<input type='file'>上添加onchange事件来进行提交表单，但是如果之前选择了一个文件没有清空，那么onchange事件不会触发，所以这里需要在适当的地方对文件清空。例如：

<form><input type="file" onchange="submit()">
</form><script>function submit() {var form = document.forms[0]form.submit()form.reset() // 提交完进行重置form表单}
</script>

三，点击<input type='file'>问题

这里有几个点注意：

IE 9中只能提交用户通过标签点击选择的文件
IE9，IE10和火狐无法点击button标签中的<input type='file'>
修改浏览器默认<input type='file'>的样式

IE9出于安全性考虑无法提交除用户通过标签点击选择的文件，但是其他主流浏览器可以这样选择并上传文件：

<form><input id="fileId" type="file">
</form>
<button onclick="select()">选择文件</button><script>function select() {var inputFile = document.getElementById('fileId')inputFile.click()}
</script>

上面这种方式在IE9中可以选择文件，但是提交表单不会成功。所以只能点击<input type='file'>标签来上传，由于浏览器默认的标签样式很丑，这里可以采取下面这样来修改达到美化的效果：

<style>form>span {display: inline-block;border: 1px solid #aaa;padding: 5px 15px;overflow: hidden;position: relative;}#fileId {opacity: 0;position: absolute;top: 0;right: 0; // 注意：这里不用left:0;的原因是IE的点击区域在右边，左边是输入区域bottom: 0;font-size: 30px; // 这里是为了把<input type='file'>的点击按钮撑大以完全覆盖父元素}
</style><form><span><input id="fileId" type="file">上传</span><button><input id="fileId" type="file"> // 放在button里面在IE9，IE10和火狐有问题上传</button>
</form>

上面代码主要是通过把<input type='file'>标签放在一个span标签里面，然后隐藏input标签并给span添加样式（注意：<input type='file'>放在button标签里面在IE9，IE10和火狐中会有问题，外面用span标签包裹就好了），这里隐藏的<input type='file'>需要全部覆盖span标签，不然点击span的某些区域无法触发input的选择文件事件，下面是美化前后的对比：

美化前IE中：

美化前谷歌中：

美化后：

可以看到美化后和一般的按钮没什么区别了。

四，提交表单后跳转问题

正常提交表单后会跳转页面，有时候不希望跳转，则需要用一个隐藏的iframe来接受表单提交的结果。例如：

<form action='http://' method='post' target='targetIframe'><input type="file" onchange="submit()">
</form>
<iframe name='targetIframe' style="display: none;">
</iframe><script>function submit() {var form = document.forms[0]form.submit()form.reset() // 提交完进行重置form表单}
</script>

上面主要是需要指定form的target属性与iframe的name一致，这样提交表单后不会刷新页面，并且在iframe的body中可以拿到返回的数据。

注意：在IE9中如果返回的是json格式的数据不会被解析，这时会弹出提示框是否要下载。解决方法是后台修改response的content-type为text/plain或text/html。

IE兼容笔记（一）：兼容IE9表单上传文件相关推荐

七牛云上传文件之表单上传文件
本人愚钝,七牛云上传文件的开发说明文档看了好久才搞懂,才能完成一个实例跑起来.现在做一下总结. 1.注册七牛,新建一个bucket,并获得ak,sk这个不用说了.不涉及到程序编码,重点讲一下编码的流程 ...
php无表单上传文件,php – 如何使用没有实体类的表单上传文件
我试图使用没有实体类的表单上传文件.到目前为止没有运气. // Controller public function uploadAction() { $request = $this->get ...
php文件上传并保存路径到数据库,thinkphp表单上传文件并将文件路径保存到数据库中?...
上传单个文件,此文以上传图片为例,上传效果如图所示创建数据库upload_img,用于保存上传路径 CREATE TABLE `seminar_upload_img` ( `id` int(11) ...
android multipartentity 怎么上传参数,android-通过MultipartEntityBuilder通过HTTP表单上传文件，并显示进度b...
android-通过MultipartEntityBuilder通过HTTP表单上传文件,并显示进度b 短版本-.jar已弃用,其升级版本java.lang.NoClassDefFoundError在 ...
PHP curl模拟表单上传文件微信公众号素材管理接口crul文件上传核心源码
PHP curl模拟表单上传文件微信公众号素材管理接口crul文件上传核心源码 /*** curl 上传文件* @param $url* @param $filePath* @param stri ...
form表单上传文件_SpringBoot中如何使用SpringMVC上传文件？
今天我们要说的这个话题很简单,不要问为啥,因为SpringBoot,哈哈.现在SpringBoot可以说人人都会用了,它的好处是显而易见的,大大的简化了配置,一起来看看吧. 我们分以下3种情况来谈这个 ...
php处理表单上传文件
使用表单上传文件的时候,表单的提交方式必须是post提交方式,上传文件的input控件type属性值应为file,最重要的是form标签需要加一个enctype="multipart/for ...
QT模拟表单上传文件到微信服务器
最近做微信开发,需要上传素材到微信服务器,我就用qt写了一个界面上传素材,首先我们来看下最终的界面: 然后将里面的access_token后面的lineEdit命名为:accessMediaEdit, ...
serverlet 原理_serverlet实现表单上传文件原理
("/home/jh/upload/request.txt"); PrintWriter fileout = new PrintWriter(new FileWriter(f)); ...

IE兼容笔记（一）：兼容IE9表单上传文件

IE兼容笔记（一）：兼容IE9表单上传文件相关推荐

最新文章

热门文章