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

最新推荐文章于 2023-05-22 19:36:02 发布

原创

最新推荐文章于 2023-05-22 19:36:02 发布 · 9.3k 阅读

14 ·

CC 4.0 BY-SA版权

文章标签：

#IE9 #表单上传文件

本文主要介绍了在IE9中处理文件上传的兼容性问题，包括如何通过表单直接提交上传，处理<input type='file'>的onchange事件，解决点击文件输入框样式美化以及避免提交表单后跳转的方法。内容涉及到ActiveXObject的使用，隐藏input标签的美化技巧，以及利用iframe防止页面跳转。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

几年前做兼容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对象的了解可以