[英]ajaxForm not submitting on file input select change
大家好,我正在尝试提交一个带有文件输入类型的简单表单。 挑战在于我希望提交在选择文件时进行。
我的表格如下:
<form id="uploadForm" action="submit.php" method="post" enctype="multipart/form-data">
<div class="fileUpload btn btn-lg btn-primary">
<span>Choose File</span>
<input id="imageBtn" type="file" class="upload" name="image"/>
</div>
</form>
我的JavaScript如下:
$("input#imageBtn").change(function () {
console.log("submitting...");
// bind to the form's submit event
$('#uploadForm').submit(function() {
console.log("submitting...form");
$('#uploadForm').ajaxSubmit();
return false;
});
});
出于某种原因,我在控制台中仅看到“正在提交...”,除此之外,什么也没有提交。
任何帮助将不胜感激!
谢谢。
从jQuery文档中:
当用户尝试提交表单时,submit事件被发送到一个元素。 它只能附加到元素上。 可以通过单击显式输入type =“ submit”,输入type =“ image”或按钮type =“ submit”或在某些表单元素具有焦点时按Enter来提交表单。
https://api.jquery.com/submit/
尝试添加适当的标签,例如
<input id="imageBtn" type="file submit" class="upload" name="image"/>
以下似乎有效。
<form id="imgForm" action="action.php" method="post" enctype="multipart/form-data">
<div class="fileUpload btn btn-lg btn-primary">
<span>Choose File</span>
<input id="imageToBeUploaded" type="file" class="upload" name="image"/>
</div>
</form>
$("body").on('submit', '#imgForm', function(){
$(this).ajaxForm({target:'#uploadStatus'});
console.log("submitting...");
return false;
});
/* Uploading Profile BackGround Image */
$('body').on('change','#imageToBeUploaded', function() {
//submit the form
$("#imgForm").submit();
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.