Question

我知道有这样的问题，但他们并没有完全回答问题。

这就是我需要的，

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

问题是，如何同时发送表单数据和dropzone文件，如以下官方文档中所述。

我遵循了Dropzone官方文档Combine normal form with Dropzone

我试过这篇文章并且有效。我能够同时获取表单数据和文件。但在此，整个表单是Dropzone。我只需要使用Dropzone制作div。

然后我尝试了这种方法，

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

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

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

Answer 1

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

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

});

您甚至可以自动执行此操作，并对$.each的每个输入执行#form，但基本逻辑在上面。

这一点可以在标题tips下的docs中找到。

Answer 2

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

为了安全起见，您的Web服务器和数据库服务器应该是相同的，以实现更高效的行为。

如果你还想要更多的安全性，那就写一个将在一天结束时运行的crone作业，并将取消与服务器中的所有文件的链接，而这些文件并不存在于db记录中。

Answer 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>

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

3 个答案: