如何在select文件时自动提交上载表单？
我有一个简单的file upload表单。 如何在文件被select时自动提交？ 我不希望用户必须点击提交button。
您可以简单地在文件input的onchange事件中调用您的表单的submit方法。
document.getElementById("file").onchange = function() { document.getElementById("form").submit(); };
使用jQuery：
<form id="target" action="destination.html"> <input type="file" id="file" value="Go" /> </form> $('#file').change(function() { $('#target').submit(); });
.change()和.submit()将帮助你。
或在JavaScript与onchange事件：
<form action="upload.php" method="post" enctype="multipart/form-data"> <input type="file" name="filename" onchange="javascript:this.form.submit();"> </form>
只要告诉fileinput自动提交表单就可以了：
<form action="http://example.com"> <input type="file" onchange="form.submit()" /> </form>
http://jsfiddle.net/4ng96dkp/7/
这个解决scheme的优点：
- 没有
id的作品。 如果您在一个html页面中有多个表单 ，它会使生活更轻松。 - 本机的 JavaScript，没有jQuery或类似的要求。
- 代码在 html标签内。 如果你检查的HTML，你会看到它的行为马上。
这个解决scheme是这样的：
- 每当修改
value时，onchange都会使input元素执行以下脚本 -
form引用表单，这个input元素是其中的一部分 -
submit()使窗体将所有数据发送到URL，如操作中指定的那样
最短的解决scheme是
<input type="file" name="file" onchange="javascript:document.getElementById('form').submit();" />
<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>
这是我的图片上传解决scheme，当用户select文件。
HTML部分：
<form enctype="multipart/form-data" id="img_form" method="post"> <input id="img_input" type="file" name="image" accept="image/*"> </form>
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) {} }); };
用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>
对于那些正在使用.NET WebForms的人来说，可能不需要整页提交。 相反，使用相同的onchange想法让javascript单击一个隐藏的button（例如<asp：Button …），隐藏的button可以采取其余的。 确保你正在做一个display: none; 在button上而不是Visible="false" 。
HTML
<form id="xtarget" action="upload.php"> <input type="file" id="xfilename"> </form>
JAVASCRIPT纯粹
<script type="text/javascript"> window.onload = function() { document.getElementById("xfilename").onchange = function() { document.getElementById("xtarget").submit(); } }; </script>
你可以把这个代码放在你的代码中
<input type="file" onchange="javascript:this.form.submit()">
这将上传文件在服务器上，而无需点击提交button
<form action="http://example.com"> <input type="file" onchange="Submit()" /> </form> <script> // it will submit form 0 or you have to select particular form document.getElementsByTagName("form")[0].submit(); </script>
如果你已经使用jQuery简单：
<input type="file" onChange="$(this).closest('form').submit()"/>
