Krajee 文件输入在表单提交时提交文件答案

【问题标题】：Krajee file-input submit files on form submitKrajee 文件输入在表单提交时提交文件
【发布时间】：2015-11-11 13:46:36
【问题描述】：

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

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

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

b) 是否有在触发提交按钮时触发上传的方法？

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

【问题讨论】：

可悲的是没有:) 现在它已经死了

标签： javascript jquery file-io

【解决方案1】：

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

<input id="input-photos" name="Photos" multiple type="file" class="file-loading">

在 Javascript 中定义一个全局变量：

var formData = new FormData();

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

在提交表单时附加所有表单字段并通过 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;
});

【讨论】：

【解决方案2】：

验证基于表单的上传（非 ajax）场景所需的属性，这将强制在上传之前选择和需要文件。此方案包括用于上传的自定义表单提交和重置按钮（默认上传和删除按钮是隐藏的）。上传将强制选择并要求一个文件 - 否则将显示 msgRequired 中设置的验证错误。

试试看：- https://plugins.krajee.com/file-count-validation-demo#required-non-ajax-1

【讨论】：