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

时间:2015-08-18 14:41:01

标签: javascript jquery file-io

我正在使用此插件进行bootstrap上传文件,该文件存储在带有提交按钮的表单中

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

我的问题是 - a)是否存在一种方法或某种方法来检查dropZone中是否仍有未上传的文件,并在他提交表格后未通过用户上传文件后通知用户

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

现在它看起来像这样 - 如果我提交我的表单它不会上传文件并只是传递表单,我必须手动点击上传文件然后提交表单 也许有些人遇到过这个问题,因为我的文档很差,我无法弄明白。

2 个答案:

答案 0 :(得分:1)

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

<input id="input-photos" name="Photos" multiple type="file" class="file-loading">
  1. 在Javascript中定义全局变量:
  2. var formData = new FormData();

    1. 将所选文件附加到formData操作上的filePreUpload
    2.  $('#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发布表单。
      2. $('#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;
        });

答案 1 :(得分:0)

验证ajax上传方案的必需属性,这将强制在上载之前选择和必需文件。此方案包括一个自定义上传按钮和一个自定义重置按钮(默认的上传和删除按钮被隐藏)。上载将强制选择文件并要求该文件-否则将显示msgRequired中设置的验证错误。

尝试一下:- http://plugins.krajee.com/file-count-validation-demo#required-ajax-1