Krajee文件输入提交表单提交文件

问题描述：

我正在使用此插件进行自举来上传文件，这些文件存储在带有提交按钮的表单中

I am using this plugin for bootstrap to upload files which is stored in a form with submit button

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

我的问题是 -
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 form Maybe 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 on filePreUpload action。

Append the selected files to formData on filePreUpload 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文件输入提交表单提交文件

相关推荐