Sé que hay algunas preguntas como esta, pero no respondieron exactamente las preguntas.

Esto es lo que necesito,

  1. Subir archivos usando Dropzone
  2. Guarde los datos del formulario y las rutas de imágenes cargadas en DB

El problema es, ¿cómo puedo enviar tanto los datos de formulario como los archivos de zona de caída al mismo tiempo, como en el siguiente artículo oficial de documentación?

Seguí estos Dropzone documentos oficiales Combina la forma normal con Dropzone

Probé este artículo y funcionó. Podría obtener tanto datos como archivos de formularios. Pero en esto, todo el formulario es un Dropzone. Solo necesito hacer un Dropzone usando un div.

Entonces probé este enfoque,

  • Cargue los archivos primero y obtenga las rutas de los archivos cargados como respuesta
  • Cree input oculto estableciendo el valor como la ruta del archivo recibida de una respuesta
  • Envía el formulario

    Pero el problema es que si uso este enfoque, primero tengo que subir archivos. ¿Qué sucede si una solicitud no funciona cuando envío form? No se guardarán datos, pero hay un archivo cargado en el servidor.

Espero que me puedan ayudar a resolver esto. Gracias

0
Malinda 7 mar. 2018 a las 07:58

3 respuestas

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

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

});

Probablemente incluso podría automatizar esto y hacer un $.each con cada entrada de un #form pero la lógica básica está arriba.

El resumen de esto se describe en los documentos en la pestaña tips.

3
Alex 7 mar. 2018 a las 05:23

No creo que sea posible. primero debe cargar el archivo y luego se agregará / actualizará el registro db. una vez que su solicitud se envíe al servidor, el registro de db se actualizará en nano segundos. Entonces no hay que preocuparse. Es lo mismo que core php.

Solo por el lado seguro, su servidor web y el servidor db deberían ser los mismos para un comportamiento más eficiente.

Si aún desea más seguridad, escriba un trabajo cron, que se ejecutará al final del día y desenlazará todos los archivos del servidor que no existen en el registro db.

0
Inti 7 mar. 2018 a las 05:30
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>
-1
Crazy coder 7 mar. 2018 a las 05:35