ajaxfileupload IE10 拒绝访问

最新推荐文章于 2022-04-01 11:06:01 发布

ISaiSai

最新推荐文章于 2022-04-01 11:06:01 发布

阅读量2.8k

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/ISaiSai/article/details/51597994

版权

javascript 专栏收录该内容

155 篇文章 0 订阅

订阅专栏

功能：点击一个按钮，实现图片异步上传，并展示上传结果
实现：点击按钮–>出发fileupload 的click事件–>上传图片–>出发file的change–>监听change，动态创建form表单，提交到服务端，target 设置为一个隐藏的iframe–>监听iframe 的load事件，读取服务端返回结果进行展示

如上流程在IE11，chrome 中都正常，在IE10 上form表单post 时候，报告 “拒绝访问”，错误

解决办法：不通过点击按钮触发input的click事件，直接将透明file覆盖在按钮上方，如上问题解决

DEMO代码如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="jquery.min.js"></script>
</head>
<body>
<div id="container">
    点击上传图片
</div>
<input type="file" id="hidenImgUpload" name="hidenImgUpload"
       style="width:100px;height: 100px; position: absolute;top:0px;left: 100px;;" >

<script>
  $(function(){
      $("#hidenImgUpload").change(function(){
           $.ajaxFileUpload({
              url: 'uploadImage.html',
              secureuri: false,
              fileElementId: 'hidenImgUpload',//file标签的id
              dataType: 'json',//返回数据的类型
              data: {},//一同上传的数据
              success: function (data, status) {
                   if (data.success) {
                      alert("上传成功");
                  } else {
                      alert("上传失败");
                  }
              },
              error: function (data, status, e) {
                  alert(e);
              }
          });
      })
  })
</script>
</body>
</html>

为了防止ie下会点击到输入框问题，需要将input file的font-size：50px ，结合left:-100px,这样这个组件就都是按钮的区域了

另外排查问题经验总结：
1. 删除掉所有的try catch 防止异常被吃掉
2. 使用源代码调试，不要使用压缩版本，这样可以更直接看到错误内容
3. 细心比较DEMO与异常代码差异，不要错误出在哪里，就钉在哪里，要开放，找不到原因的时候可以休息一下，换换脑子，说不定就灵光乍现。
4. 排查异常的简易DEMO还是有价值的，但是极其复杂的问题，还是在出现异常的场景直接排查肯能更简单