js提交带file的form表单被IE拒绝的解决方法

最新推荐文章于 2021-08-05 14:55:41 发布

wtz1234567

最新推荐文章于 2021-08-05 14:55:41 发布

阅读量795

点赞数

分类专栏： web开发 web前端文章标签： IE 拒绝 js form js file form

web开发同时被 2 个专栏收录

5 篇文章

订阅专栏

web前端

1 篇文章

订阅专栏

本文介绍了一种在Internet Explorer浏览器中实现文件选择后自动上传的方法，解决了因安全限制导致的程序化提交失败问题。通过使用隐藏文件输入框并利用<label>标签的特性，实现了跨浏览器的一致体验。

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

在编写一个文件上传功能时，想通过点击一个链接来上传文件，选择文件后自动提交，而不用用户再点击提交按钮，原本的实现如下：

<form method="post" name="fileform" id="fileform" enctype="multipart/form-data" action="">
<input type="file" name="examineFile" id="examineFile" 
 onchange="this.form.submit();" style="display:none" class="required" accept="application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel.sheet.macroEnabled.12"/>
<input id="uploadbutton" type="submit" style="display:none" />
</form>
<a href='javascript:void(0);' onclick="document.getElementById('examineFile').click();return false;">[上传审核列表文件]</a>

这样实现在chrome和firefox下都没问题，但是IE浏览器（IE10）拒绝提交，网上查了说是考虑到安全的问题，不得不换一种解决办法。百度了好久没找到解决方法，后来在谷歌通过英文查找找到了解决方法。解决方法如下：

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo</title>
  
  <script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'></script>
  <link rel="stylesheet" type="text/css" href="/css/normalize.css">
  
  
  <link rel="stylesheet" type="text/css" href="/css/result-light.css">
  
  <style type='text/css'>
    body { font-family: Helvetica; }

/* hide the file input. important to position it offscreen as opposed display:none. some browsers don't like that */
#fileinput { position: absolute; left: -9999em; }

/* an example of styling your label to look/behave like a link */
#link { color: #2a9dcf; font-size: 16px; }
#link:hover { text-decoration: underline; cursor: pointer; }

/* an example of styling your label to look like a button */
#button {
    display: block;
    width: 31px;
    height: 27px;
    text-indent: -9999em;
    background: transparent url(http://www.afar.com/assets/profile_sprite.png) 0 0 no-repeat;
}

#button:hover {
    cursor: pointer;
}


  </style>
  


<script type='text/javascript'>
$(window).load(function(){
/* 

The Goals:
 1) allow user to upload a file by using standard html file input control
 2) hide standard html file input control and apply own styling
 3) after user selects file to upload, automatically submit the form

The Browsers:
 - Firefox, Chrome, IE8/9, Safari
 - IE7 didn't work, but it might if you add that browser to the workaround detailed at the bottom

The Initial Solution
 1) Hide the file input by positioning it offscreen. Important not to display:none as some browsers won't like this.
 2) Add another styled element to the page (link, button). 
 3) Listen for a click on that element, then programmatically send a click to the file input to trigger the native 'file explorer'
 4) Listen for the file input's onchange event (occurs after a user chooses their file) 
 5) Submit the form

The Problem:
 1) IE: if you programmatically send a click to a file input in order to activate it (2), programmatically submitting the form (5) will throw a security error

The Workaround Solution
 1) Same as above
 2) Take advantage of the accessibility features built in to the <label> tag (clicking on a label will activate it's associated control) by styling 
    a <label> tag instead of a link/button
 3) Listen for the file input's onchange event
 4) Submit the form
 5) For some reason Mozilla browsers won't activate a file input by clicking on it's <label>. For Mozilla, listen for the click on the label and send a click
    event to the file input to activate it.

*/

// after the user selects the file they want to upload, submit the form
$('#fileinput').on("change", function() {
    $('#uploader-form').submit();
});


// mozilla won't focus a file input with the click of a corresponding
// label, but all other browsers do. if we detect mozilla, listen for
// the label click and send a click to the file input programmatically
if($.browser.mozilla) {
    $('.trigger-file-input').click(function() {
      $('#fileinput').click();                             
    });
}

}); 

</script>


</head>
<body>
  <form id="uploader-form" action="http://hotblocks.nl/_http_server.php">
    <label for="fileinput" id="link" class="trigger-file-input">Link Label</label>
    <br />
    <label for="fileinput" id="button" class="trigger-file-input">Button Label</label>
    <input type="file" id="fileinput" />
</form>
  
</body>


</html>

参考资料：http://jsfiddle.net/djibouti33/uP7A9/

http://stackoverflow.com/questions/9396411/ie-javascript-form-submit-with-file-input