Javascript 选择文件后如何自动提交上传表单？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7321855/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I auto-submit an upload form when a file is selected?
提问by ram1
I have a simple file upload form. How do I make it submit automatically when a file has been selected? I don't want the user to have to click the Submit button.
我有一个简单的文件上传表单。选择文件后如何使其自动提交？我不希望用户必须单击提交按钮。
回答by Alex Turpin
You can simply call your form's submitmethod in the onchangeevent of your file input.
您可以submit在onchange输入文件时简单地调用表单的方法。
document.getElementById("file").onchange = function() {
document.getElementById("form").submit();
};
回答by slartidan
Just tell the file-input to automatically submit the form on any change:
只需告诉file-input 在任何更改时自动提交表单：
<form action="http://example.com">
<input type="file" onchange="form.submit()" />
</form>This solution works like this:
此解决方案的工作方式如下：
onchangemakes the input element execute the following script, whenever thevalueis modifiedformreferences the form, that this input element is part ofsubmit()causes the form to send all data to the URL, as specified inaction
Advantages of this solution:
该解决方案的优点：
- Works without
ids. It makes life easier, if you have several formsin one html page. - Nativejavascript, no jQuery or similar required.
- The code is insidethe html-tags. If you inspect the html, you will see it's behavior right away.
- 无需
ids 即可工作。如果您在一个 html 页面中有多个表单，它会使生活更轻松。 - 原生javascript，不需要 jQuery 或类似工具。
- 代码在html-tags 中。如果您检查 html，您将立即看到它的行为。
回答by Samich
Using jQuery:
使用jQuery：
$('#file').change(function() {
$('#target').submit();
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="target" action="destination.html">
<input type="file" id="file" value="Go" />
</form>回答by Alex.K.
JavaScript with onchangeevent:
带有onchange事件的JavaScript ：
<form action="upload.php" method="post" enctype="multipart/form-data">
<input type="file" name="filename" onchange="javascript:this.form.submit();">
</form>jQuery
.change()and .submit():
$('#fileInput').change(function() {
$('#myForm').submit();
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<form action="upload.php" id="myForm">
<input type="file" id="fileInput">
</form>回答by xboz
The shortest solution is
最短的解决方案是
<input type="file" name="file" onchange="javascript:document.getElementById('form').submit();" />
回答by Dhurba Baral
<form id="thisForm" enctype='multipart/form-data'>
<input type="file" name="file" id="file">
</form>
<script>
$(document).on('ready', function(){
$('#file').on('change', function(){
$('#thisForm').submit();
});
});
</script>
回答by Sojtin
If you already using jQuery simple:
如果您已经在使用 jQuery simple：
<input type="file" onChange="$(this).closest('form').submit()"/>
回答by sigi
This is my image upload solution, when user selected the file.
这是我的图像上传解决方案，当用户选择文件时。
HTML part:
HTML部分：
<form enctype="multipart/form-data" id="img_form" method="post">
<input id="img_input" type="file" name="image" accept="image/*">
</form>
JavaScript:
JavaScript：
document.getElementById('img_input').onchange = function () {
upload();
};
function upload() {
var upload = document.getElementById('img_input');
var image = upload.files[0];
$.ajax({
url:"/foo/bar/uploadPic",
type: "POST",
data: new FormData($('#img_form')[0]),
contentType:false,
cache: false,
processData:false,
success:function (msg) {}
});
};
回答by Razib Al Mamun
Try bellow code with jquery :
使用 jquery 尝试以下代码：
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<script>
$(document).ready(function(){
$('#myForm').on('change', "input#MyFile", function (e) {
e.preventDefault();
$("#myForm").submit();
});
});
</script>
<body>
<div id="content">
<form id="myForm" action="action.php" method="POST" enctype="multipart/form-data">
<input type="file" id="MyFile" value="Upload" />
</form>
</div>
</body>
</html>
回答by KingRider
HTML
HTML
<form id="xtarget" action="upload.php">
<input type="file" id="xfilename">
</form>
JAVASCRIPT PURE
纯JAVASCRIPT
<script type="text/javascript">
window.onload = function() {
document.getElementById("xfilename").onchange = function() {
document.getElementById("xtarget").submit();
}
};
</script>
