jQuery:提交变更表单
jQuery: submit form on change
当用户单击按钮时,我正试图提交一个带有字段元素的表单。我使用的是change
函数,它是在选择文件后调用的。问题是表单数据是在没有字段数据的情况下提交的。如何在设置字段数据后使其提交表单?
如果我用submit
而不是change
来调用它,那么下面的代码就可以正常工作。
<form method="POST" action="public/index.php/students/edit/49" accept-charset="UTF-8" id="fileform" enctype="multipart/form-data">
<input type="button" onclick="document.getElementById('fileupload').click(); return false;" value="UPLOAD CV / RESUME" class="add" />
<input type="file" id="fileupload" style="visibility: hidden;" />
</form>
<script>
$('#fileupload').change(function()
{
var formData = new FormData($(this)[0]);
var request = $.ajax({
type: "POST",
processData: false,
contentType: false,
url: "{{URL::action('StudentController@addDocument')}}",
data: formData,
});
request.done(function( msg ) {
console.log( msg );
});
request.fail(function( jqXHR, textStatus ) {
console.log(textStatus );
});
});
</script>
您可以尝试
$.fn.serializefiles = function() {
var obj = $(this);
/* ADD FILE TO PARAM AJAX */
var formData = new FormData();
$.each($(obj).find("input[type='file']"), function(i, tag) {
$.each($(tag)[0].files, function(i, file) {
formData.append(tag.name, file);
});
});
var params = $(obj).serializeArray();
$.each(params, function (i, val) {
formData.append(val.name, val.value);
});
return formData;
};
然后在函数ajax 中
var request = $.ajax({
type: "POST",
processData: false,
contentType: false,
url: "{{URL::action('StudentController@addDocument')}}",
data: $('#fileform').serializefiles(),
});
如果你想通过ajax上传一个或多个文件,你必须在之上写一个函数
$('#fileupload').change( ... )
中的this
是指输入元素,formData需要一个表单元素,请尝试以下操作:
$('#fileupload').change(function () {
var formData = new FormData(this.form);
...
});
您还需要将name
属性添加到您的文件输入中。
请求看起来像:
...
Content-Disposition: form-data; name="file"; filename="FILE_NAME"
Content-Type: CONTENT_TYPE
...
相关文章:
- HTML表单提交时未执行外部函数
- JS表单提交"无法使用Chrome数据保护程序加载此页面.尝试重新加载页面.调试信息:POST CISmtuK
- 将图像上传ajax与表单提交ajax相结合
- Javascript无法处理表单提交
- 如何在我的情况下禁用表单提交
- 加载后的页面与ajax表单提交不起作用
- angularjs-控制器在表单提交时未调用
- 禁用带有字符白名单的表单提交
- 如何使用Google Analytics跟踪表单提交
- 使用javascript将表单提交到iframe目标中
- e.preventDefault在表单提交时被忽略
- AngularJS JQuery Ajax表单提交等效
- JavaScript表单提交帮助
- PHP表单提交和重定向
- 当所有输入文本字段都为空时,禁止表单提交,但当jquery中的任何字段不为空时允许提交
- setTimeOut AFTER jQuery表单提交
- 从函数中选择要触发表单提交的正确元素
- JavaScript表单提交没有't fire asp服务器端点击功能的提交按钮
- 表单提交问题,如何在我的URL末尾获得ID的值
- Javascript使用Confirm取消表单提交