我有一个简单的文件上传表格。选择文件后,如何使其自动提交?我不希望用户必须单击“提交”按钮。
您可以submit
在onchange
输入文件时简单地调用表单的方法。
document.getElementById("file").onchange = function() {
document.getElementById("form").submit();
};
只需告诉file
-input在发生任何更改时自动提交表单即可:
<form action="http://example.com">
<input type="file" onchange="form.submit()" />
</form>
此解决方案的工作方式如下:
该解决方案的优点:
- 不带
id
s的作品。如果您在一个html页面中包含多种表单,则可以简化工作。 - 本机javascript,不需要jQuery或类似的东西。
- 该代码位于html标签内。如果您检查html,则会立即看到它的行为。
使用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>
带有onchange
事件的JavaScript :
<form action="upload.php" method="post" enctype="multipart/form-data">
<input type="file" name="filename" onchange="javascript:this.form.submit();">
</form>
$('#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>
最短的解决方案是
<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>
如果您已经使用jQuery简单:
<input type="file" onChange="$(this).closest('form').submit()"/>
当用户选择文件时,这是我的图像上传解决方案。
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单击一个隐藏的按钮(例如<asp:Button ...),然后隐藏的按钮可以处理其余部分。确保您正在display: none;
按按钮而不是Visible="false"
。
的HTML
<form id="xtarget" action="upload.php">
<input type="file" id="xfilename">
</form>
JAVASCRIPT PURE
<script type="text/javascript">
window.onload = function() {
document.getElementById("xfilename").onchange = function() {
document.getElementById("xtarget").submit();
}
};
</script>
<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>
您可以放置此代码以使您的代码仅使用一行代码即可工作
<input type="file" onchange="javascript:this.form.submit()">
这将文件上传到服务器上,而无需单击提交按钮
本文地址:http://javascript.askforanswer.com/xuanzewenjianhouruhezidongtijiaoshangchuanbiaodan.html
文章标签:html , javascript
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!
文章标签:html , javascript
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!
评论已关闭!