Javascript 选择文件后，如何自动提交上传表单？_Javascript_Html

Javascript 选择文件后，如何自动提交上传表单？

javascript html

Javascript 选择文件后，如何自动提交上传表单？,javascript,html,Javascript,Html,我有一个简单的文件上传表。选择文件后，如何使其自动提交？我不希望用户必须单击Submit按钮。使用jQuery： $（'#文件'）.change（函数（）{ $（“#目标”）.submit（）； }); 您只需在文件输入的onchange事件中调用表单的submit方法即可 document.getElementById("file").onchange = function() { document.getElementById("form").submit(); }; JavaS

我有一个简单的文件上传表。选择文件后，如何使其自动提交？我不希望用户必须单击Submit按钮。

使用jQuery：

$（'#文件'）.change（函数（）{
$（“#目标”）.submit（）；
});
您只需在文件输入的onchange
事件中调用表单的submit
方法即可
document.getElementById("file").onchange = function() {
    document.getElementById("form").submit();
};

JavaScript和onchange事件：

对于使用.NET WebForms的用户，可能不需要提交完整的页面。相反，使用相同的onchange
idea让javascript单击隐藏按钮（例如最短的解决方案是
<input type="file" name="file" onchange="javascript:document.getElementById('form').submit();" />

只要告诉文件
-input在任何更改时自动提交表单：


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>


window.onload=函数（）{
document.getElementById（“xfilename”）.onchange=function（）{
document.getElementById（“xtarget”）.submit（）；
}
};
使用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>


$（文档）.ready（函数（）{
$（'#myForm'）。关于（'change'，'input#MyFile'，函数（e）{
e、 预防默认值（）；
$（“#我的表格”）.submit（）；
});
});

$（文档）.on（'ready'，function（）{
$（'#file'）。在（'change'，function（）上{
$（“#此表单”）.submit（）；
});
});

//它将提交表格0，或者您必须选择特定表格
document.getElementsByTagName（“表单”）[0]。提交（）；
您可以使用此代码，使您的代码只使用一行代码
<input type="file" onchange="javascript:this.form.submit()">



如果您已经使用jQuery simple:
<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>

另外，stackoverflow上也有同样的问题：这种方法在Safari中有效吗？我不确定。我已经测试了Chrome、IE和FF，它们都有效。@ErdalG：下面添加了工作jQuery版本。它避免了这个问题。如果用户选择了错误的文件怎么办？依我看，你应该让用户选择何时提交。@Tyler大多数人都会选择correct文件和我正在努力减少UX摩擦。对于那些选择错误文件的人，在上传文件后，他们可能会选择删除它。“大多数人”做出明智的决定，但大多数人不是。我同意@TylerCrompton的观点，用户会犯最愚蠢的错误并为此责备你，你可以在提交后添加撤销。最好的答案是最简单的答案，这在Safari中有效，因为jQuery解决方案似乎不起作用。奇怪？@henrywright:是的。在jQuery中，Submit（）
调用触发jQuerysubmit
事件，但不会触发底层表单submit（）
。当然可以使用$（'form'）[0]。submit（）
使用jQueryHow aboutonchange=“this.form.submit（）”
如何onchange=“form.submit（）”？：）如果你投了反对票，请添加一条评论，以澄清错误或需要改进的地方。+1，因为这是我发现的唯一一个能够用jquery捕获提交事件的方法。其他方法似乎绕过了submit事件，因此在使用它们时，我无法检查表单或使用Ajax提交。谢谢
<input type="file" onChange="$(this).closest('form').submit()"/>

<form enctype="multipart/form-data" id="img_form" method="post">
    <input id="img_input" type="file" name="image" accept="image/*">
</form>

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) {}
      });
};