兼容ie9上传本地资源

在ie9中上传文件出现问题，大多数的上传文件都采用new Formdata创建添加文件，在IE9中不支持Formdata对象操作，ie10是支持的。所以只能使用表单提交的方式进行操作。


<form id="form" action="/upload" onsubmit="return  addevent(event) enctype="multipart/form-data"">
        <input id="fid" type="file" onchange="uploadFile">
        <button>提交</button>
</form>
<div id="sub">点我提交</div>

 注意在ie9中一定要是手动触发input选择文件,如果用其他事件触发input的点击事件，选取完文件后，input中是没有文件对象的，此时提交表单为空内容。

 

表单提交后防止页面刷新，使用jquery-form插件来帮助我们完成提交。原理就是提交时创建一个iframe视口，form的target属性指向iframe的id值，这样就实现了在iframe中提交，然后从iframe的内部把返回值取到。

 

除了ie9以下，其他均可以这种方式上传

 

<body>
    <input type="file" onchange="changeFile(event)">
</body>
<script>
    function changeFile(e) {
        var fileObj=e.target.files[0]
        uploadFile(fileObj)
    }
    function uploadFile(fileObj){
        var fileObj=new FormData()
        fileObj.append('file',fileObj)
        $.ajax({
            url:'/text',
            data:fileObj,
            dataType:json,
            async:true,
            cache:false,
            processData:false, //参数序列化
            contentType:false, //必须
            success:function(){

            }
        })
    }
</script>

　　

 

 

 

 

posted @ 2020-08-15 23:17  yuanhonglin  阅读(561)  评论(0)    收藏  举报