Dropzone：一次提交表单数据和dropzone答案

【问题标题】：Dropzone: Submit both form data and dropzone at onceDropzone：一次提交表单数据和dropzone
【发布时间】：2018-03-07 04:58:38
【问题描述】：

我知道有一些这样的问题，但他们没有准确回答问题。

这是我需要的，

使用Dropzone上传文件
将表单数据和上传的图片路径保存到数据库

问题是，我怎样才能同时发送表单数据和 dropzone 文件，就像下面的官方文档文章一样。

我关注了这个Dropzone官方文档Combine normal form with Dropzone

我尝试了这篇文章，它奏效了。我可以同时获取表单数据和文件。但在此，整个表单是Dropzone。我只需要使用div 制作Dropzone。

然后我尝试了这种方法，

先上传文件，然后获取上传的文件路径作为响应
通过将值设置为从响应中接收到的文件路径来创建隐藏的input
提交表格

但问题是，如果我使用这种方法，我必须先上传文件。如果在我提交 form 时请求被中断怎么办？不会保存任何数据，但服务器上有上传的文件。

我希望你们能帮助我解决这个问题。谢谢

【问题讨论】：

Adding more data to Dropzone.js post的可能重复

标签： php codeigniter file-upload dropzone.js

【解决方案1】：

myDropzone.on("sending", function(file, xhr, formData) { 

 formData.append("fieldname1", $('field-name-1').val());  

});

您甚至可以自动执行此操作并使用#form 的每个输入执行$.each，但基本逻辑如上所述。

docstips 选项卡下概述了这一点。

【讨论】：

谢谢。这是最好的解决方案。我没有阅读太多文档。我的错。

【解决方案2】：

我认为这是不可能的。您必须先上传文件，然后添加/更新数据库记录。一旦您的请求提交到服务器，数据库记录将在纳秒内更新。所以不用担心。它与核心 php 相同。

为了安全起见，您的网络服务器和数据库服务器应该相同，以提高行为效率。

如果您仍然想要更高的安全性，请编写一个 cron 作业，该作业将在一天结束时运行，并将取消与服务器的所有文件的链接，这些文件在 db 记录中不存在。

【讨论】：

【解决方案3】：

var dropzone = $("#dropzone"),
	input = dropzone.find('input');

	dropzone.on({
		dragenter : dragin,
		dragleave : dragout
	});

	input.on('change', drop);
  
  function dragin(e) { //function for drag into element, just turns the bix X white
		$(dropzone).addClass('hover');
	}

	function dragout(e) { //function for dragging out of element                         
		$(dropzone).removeClass('hover');
	}
  
  function drop(e) {
		var file = this.files[0];
		$('#dropzone').removeClass('hover').addClass('dropped').find('img').remove();
		// upload file here
		showfile(file); // showing file for demonstration ... 
	}

#dropzone {
		position: relative;
		border: 5px solid #000;
		border-radius: 10px;
		color: #000;
		font: bold 24px/200px arial;
		height: 200px;
		margin: 30px auto;
		text-align: center;
		width: 200px;
	}
	#dropzone.hover {
		border: 4px solid green;
		color: green;
	}
	#dropzone.dropped {
		background: #222;
		border: 5px solid #444;
	}
	#dropzone div {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
	}
	#dropzone img {
		border-radius: 5px;
		vertical-align: middle;
		max-width: 95%;
		max-height: 95%;
	}
	#dropzone [type="file"] {
		cursor: pointer;
		position: absolute;
		opacity: 0;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
	}
	#session_message_succ{
		text-align: center;
		color: #07bd07;
	}
	#session_message_err{
		text-align: center;
		color: #e2350e;
	}
	.container{
		text-align: center;
	}
	.meta_data{
		text-align: center;
	}
	.submit_div
	{
		display: flex;
		align-items: center;
		margin-bottom:15px;
	}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="demoFiler" method='POST' id="demoFiler" action="upload/do_upload'" enctype="multipart/form-data">
		
		<div id="dropzone">
			<div>Drop your file</div>
			<input type="file" name="image[]" multiple />
		</div>
		<div class="container">
			
			<div class="submit_div">
				<input type="submit" name="save_form" />
			</div>
		</div>
	</form>

【讨论】：