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

wtz123

浏览: 51542 次
性别:
来自: 宁波

最近访客更多访客>>

test_8teye1

woodding2008

838024497

yeahgoodboy

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

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

博客分类：

web开发
web前端

IE 拒绝 js form js file form

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

<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

分享到：