gpt4 book ai didi

javascript - Krajee file-input submit files on form 提交

转载 作者:行者123 更新时间:2023-11-30 00:24:04 25 4
gpt4 key购买 nike

我正在使用这个插件来 Bootstrap 上传存储在带有提交按钮的表单中的文件

http://plugins.krajee.com/file-input/

我的问题是——a) 有没有一种方法或东西可以检查 dropZone 中是否还有尚未上传的文件,并在用户提交未上传文件的表单后通知用户

b) 是否有一种方法可以在触发提交按钮时触发上传?

现在看起来像这样 - 如果我提交我的表单,它不会上传文件而只是传递表单,我必须手动单击上传文件然后提交表单也许你们中的一些人遇到过这个问题,因为由于文档不足,我自己无法弄清楚。

最佳答案

我找到了解决此问题的方法。

<input id="input-photos" name="Photos" multiple type="file" class="file-loading">
  1. 在 Javascript 中定义一个全局变量:

var formData = new FormData();

  1. filePreUpload 操作中将所选文件附加到 formData

 $('#input-photos').on('filebatchpreupload', function(event, data, previewId, index) {
var form = data.form, files = data.files, extra = data.extra,
response = data.response, reader = data.reader;

$.each(files, function (key, value) {
if(value != null){
formData.append("Photos", value, value.name);
}
}); });

  1. 在提交表单时附加所有表单字段并通过 ajax 发布表单。

$('#yourForm').submit(function() {
$('#input-photos').fileinput('upload');
var model_data = $("#yourForm").serializeArray();
$.each(model_data,function(key,input){
formData.append(input.name,input.value);
});
$.ajax({
url: "@Url.Action("Save", "Home")",
type: "POST",
datatype: "json",
data: formData,
processData: false, // tell jQuery not to process the data
contentType: false, // tell jQuery not to set contentType
success: (function (result){
window.location.href = '@Url.Action("Index", "Home")';
}),
error: function (xhr) {
alert("Error: " + xhr.statusText);
}
});
return false;
});

关于javascript - Krajee file-input submit files on form 提交,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32075527/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com