IE下 js文件上传时拒绝访问问题

该文章来自于http://blog.csdn.net/zhaifengmin/article/details/48970285

点击打开链接

最近碰到个问题，在使用ajaxFileupload控件上传文件的时候，在IE下总是传不了，但FireFox和Chrome下则可以上传。跟踪代码，发现时$(form).submit();时出错了。

调试了n久，最后查资料说是IE下 file表单控件，不能用js控制打开文件选择器，必须要手动点击才可以，否则会报 “拒绝访问”。

所以，只能用按钮盖住file，但让点击事件透到file上面来打开文件选择器。

============================================================================================================

1. 我们用ajaxfileupload 做文件上传

   遇到的第一个问题是

   addEventlistener方法报错误，百度了一下才知道，是

   jquery的版本太高，ie 9及以下，要用jquery1.x, 

   而我用的事jquery2.x，于是

    

   <!--[if !IE]> -->    

   <script src="jquery-2.0.0b2.js"></script> 

   <!-- <![endif]--> 

    <!--[if IE]>    

   <script src="jquery-1.9.1.js"></script> 

   <![endif]-->

2. 解决了版本问题，仍然 提示上传错误

   我的代码是这样的

   $.ajaxFileUpload({         

       url: '/aj/uploadphone',         

       secureuri: false,         

       fileElementId: 'up_file',         

       dataType: "json",         

       type: "post",        

    beforeSend: function() {             

       $('#up1').html('上传中...');         

   },         

   success: function(res) {            

       console.log(res.msg);        

   },         

   error: function(res) {            

        alert('上传失败');       

    }    

    }); 

   于是我去调试 ajaxfileupload.min.js 中的代码，

   发现这句报错了  jQuery(form).submit(); 

   错误提示是： 拒绝访问

    

   怎么会拒绝访问那？

   原来

   表单中存在file是，必须通过手动触发点击file控件的浏览时一切操作，通过别的控件来触发file的点击事件时就会出现拒绝访问的提示，这是ie处于安全性 的限制。

   因为自带的<input type="file"> 非常难看，我就把它隐藏了，而用一个按钮的点击事件 触发 他的点击事件， 在低版本的IE中是不允许的

3. 于是我想到了美化 <input type="file">

   幸好网上有

   这回上传成功了 json 也返回了，

4.  

   可返回json数据在IE浏览器中提示下载，

   原因是 返回数据时的http头，content-type: application/json

   而低版本的ie不认识这种头，所有不认识的，ie都提示下载保存，

   实了好几种头，和查了一些资料 发现

   低于IE10版本一下的IE浏览器都需要使用text/html格式的Response

5. 最终解决

   js: 

   $.ajaxFileUpload({         

       url: '/aj/uploadphone',         

       secureuri: false,         

       fileElementId: 'up_file',         

       dataType: "text", //ie低版本不支持json         

       type: "post",         

   beforeSend: function() {             

       $('#up1').html('上传中...');         

   },         

   success: function(res) {             

       res = eval('('+res+')');  //转为json对象            

       console.log(res.msg);             

       $('#mytextarea').val(filter_tels(res.msg));             

   },         

   error: function(res) {             

       alert('上传失败');             

       console.log(res, 'sss');         

   }    

    }); 

   php 服务端：

   直接  echo json_encode($data);

6. 6

   由于下载的 ajaxfileupload版本不同，

   这个文件中也会爆出一些错误，

   可自行百度解决

7.