问题描述
我正在使用此插件进行自举来上传文件,这些文件存储在带有提交按钮的表单中
I am using this plugin for bootstrap to upload files which is stored in a form with submit button
我的问题是 -
a)是否有一种方法可以检查dropZone中是否还有尚未上传的文件,并在提交他未上传文件的表单后通知用户
My question is -a) is there a method or something to either check if there are files in the dropZone that are still not uploaded and notify a user after he submits a form that he didn't uploaded the files
b)是否有一种方法会在触发提交按钮时触发上传?
b) is there a method that will trigger the upload when the submit button is fired?
现在它看起来像这样 - 如果我提交我的形式它不会上传文件,只是通过表格,我必须手动点击上传文件,然后提交表格
也许你们有些人遇到这个问题因为我自己无法弄明白,因为文件很差。
Now it looks like this - if I submit my form it wont upload the files and just pass the form, I have to manually click upload files then submit the formMaybe some of you came across this issue cause I am not able to figure it out myself due to poor documentation.
推荐答案
我找到了解决这个问题的方法。
I found a work around for this issue.
<input id="input-photos" name="Photos" multiple type="file" class="file-loading">
- 在Javascript中定义全局变量:
var formData = new FormData();
- 将所选文件附加到
formData
onfilePreUpload
action。
- Append the selected files to
formData
onfilePreUpload
action.
$('#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);
}
}); });
- 在表单提交上附加所有表单字段并通过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;
});
这篇关于Krajee文件输入提交表单提交文件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!