javascript - files - Integrando dropzone.js en un formulario html existente con otros campos
dropzone multiple files (9)
Además de lo que estaba diciendo sqram, Dropzone tiene una opción adicional no documentada, "hiddenInputContainer". Todo lo que tiene que hacer es establecer esta opción en el selector del formulario al que desea que se anexe el campo de archivo oculto. ¡Y voilá! El campo de archivo ".dz-hidden-input" que Dropzone normalmente agrega al cuerpo se mueve mágicamente a tu forma. Sin alterar el código fuente de Dropzone.
Ahora, mientras esto funciona para mover el campo del archivo Dropzone a su formulario, el campo no tiene nombre. Por lo tanto, deberá agregar:
_this.hiddenFileInput.setAttribute("name", "field_name[]");
para dropzone.js después de esta línea:
_this.hiddenFileInput = document.createElement("input");
alrededor de la línea 547.
Actualmente tengo un formulario html que los usuarios completan los detalles de un anuncio que desean publicar. Ahora quiero poder agregar un dropzone para subir imágenes del artículo a la venta. He encontrado dropzone.js que parece hacer la mayor parte de lo que necesito. Sin embargo, al examinar la documentación, parece que necesita especificar la clase del formulario completo como ''dropzone'' (en lugar de solo el elemento de entrada). Esto significa que toda mi forma se convierte en la zona de caída. ¿Es posible usar Dropzone en solo una parte de mi formulario, es decir, solo especificando el elemento como clase dropzone, en lugar de todo el formulario?
Podría usar formularios separados, pero quiero que el usuario pueda enviarlo todo con un solo botón.
Alternativamente, ¿hay otra biblioteca que pueda hacer esto?
Muchas gracias
El "dropzone.js" es la biblioteca más común para cargar imágenes. Si desea tener el "dropzone.js" como parte de su formulario, debe seguir los siguientes pasos:
1) para el lado del cliente:
HTML:
<form action="/" enctype="multipart/form-data" method="POST">
<input type="text" id ="Username" name ="Username" />
<div class="dropzone" id="my-dropzone" name="mainFileUploader">
<div class="fallback">
<input name="file" type="file" multiple />
</div>
</div>
</form>
<div>
<button type="submit" id="submit-all"> upload </button>
</div>
JQuery:
<script>
Dropzone.options.myDropzone = {
url: "/Account/Create",
autoProcessQueue: false,
uploadMultiple: true,
parallelUploads: 100,
maxFiles: 100,
acceptedFiles: "image/*",
init: function () {
var submitButton = document.querySelector("#submit-all");
var wrapperThis = this;
submitButton.addEventListener("click", function () {
wrapperThis.processQueue();
});
this.on("addedfile", function (file) {
// Create the remove button
var removeButton = Dropzone.createElement("<button class=''btn btn-lg dark''>Remove File</button>");
// Listen to the click event
removeButton.addEventListener("click", function (e) {
// Make sure the button click doesn''t submit the form:
e.preventDefault();
e.stopPropagation();
// Remove the file preview.
wrapperThis.removeFile(file);
// If you want to the delete the file on the server as well,
// you can do the AJAX request here.
});
// Add the button to the file preview element.
file.previewElement.appendChild(removeButton);
});
this.on(''sendingmultiple'', function (data, xhr, formData) {
formData.append("Username", $("#Username").val());
});
}
};
</script>
2) para el lado del servidor:
ASP.Net MVC
[HttpPost]
public ActionResult Create()
{
var postedUsername = Request.Form["Username"].ToString();
foreach (var imageFile in Request.Files)
{
}
return Json(new { status = true, Message = "Account created." });
}
Este es solo otro ejemplo de cómo puede usar Dropzone.js en una forma existente.
dropzone.js:
init: function() {
this.on("success", function(file, responseText) {
//alert("HELLO ?" + responseText);
mylittlefix(responseText);
});
return noop;
},
Luego, más adelante en el archivo puse
function mylittlefix(responseText) {
$(''#botofform'').append(''<input type="hidden" name="files[]" value="''+ responseText +''">'');
}
Esto supone que tienes un div con id #botofform esa manera cuando cargues puedes usar los nombres de los archivos cargados.
Nota: mi script de carga devolvió el nombre de archivo .uploaded.jpeg dubblenote también necesitaría hacer un script de limpieza que verifica el directorio de carga de los archivos que no están en uso y los elimina ... si en un formulario de entrada no autenticado :)
Para enviar todos los archivos junto con otros datos de formulario en una sola solicitud, puede copiar input nodos de input ocultos temporales de Dropzone.js en su formulario. Puede hacer esto dentro del controlador de eventos de addedfiles :
var myDropzone = new Dropzone("myDivSelector", { url: "#", autoProcessQueue: false });
myDropzone.on("addedfiles", () => {
// Input node with selected files. It will be removed from document shortly in order to
// give user ability to choose another set of files.
var usedInput = myDropzone.hiddenFileInput;
// Append it to form after stack become empty, because if you append it earlier
// it will be removed from its parent node by Dropzone.js.
setTimeout(() => {
// myForm - is form node that you want to submit.
myForm.appendChild(usedInput);
// Set some unique name in order to submit data.
usedInput.name = "foo";
}, 0);
});
Obviamente, esta es una solución alternativa que depende de los detalles de implementación. Código fuente relacionado .
Puede modificar el formData detectando el evento ''enviar'' desde su zona de caída.
dropZone.on(''sending'', function(data, xhr, formData){
formData.append(''fieldname'', ''value'');
});
Tengo una solución más automatizada para esto.
HTML:
<form role="form" enctype="multipart/form-data" action="{{ $url }}" method="{{ $method }}">
{{ csrf_field() }}
<!-- You can add extra form fields here -->
<input hidden id="file" name="file"/>
<!-- You can add extra form fields here -->
<div class="dropzone dropzone-file-area" id="fileUpload">
<div class="dz-default dz-message">
<h3 class="sbold">Drop files here to upload</h3>
<span>You can also click to open file browser</span>
</div>
</div>
<!-- You can add extra form fields here -->
<button type="submit">Submit</button>
</form>
JavaScript:
Dropzone.options.fileUpload = {
url: ''blackHole.php'',
addRemoveLinks: true,
accept: function(file) {
let fileReader = new FileReader();
fileReader.readAsDataURL(file);
fileReader.onloadend = function() {
let content = fileReader.result;
$(''#file'').val(content);
file.previewElement.classList.add("dz-success");
}
file.previewElement.classList.add("dz-complete");
}
}
Laravel:
// Get file content
$file = base64_decode(request(''file''));
No es necesario deshabilitar DropZone Discovery y el envío de formulario normal podrá enviar el archivo con cualquier otro campo de formulario a través de la serialización de formulario estándar.
Este mecanismo almacena el contenido del archivo como cadena base64 en el campo de entrada oculto cuando se procesa. Puede decodificarlo de nuevo a cadena binaria en PHP a través del método estándar base64_decode() .
No sé si este método se verá comprometido con archivos grandes, pero funciona con ~ 40MB.
Tuve exactamente el mismo problema y descubrí que la respuesta de Varan Sinayee fue la única que realmente resolvió la pregunta original. Esa respuesta puede simplificarse, así que aquí hay una versión más simple.
Los pasos son:
Crea una forma normal (no olvides el método y los argumentos enctype ya que esto ya no es manejado por Dropzone).
Pon un div dentro con la
class="dropzone"(así es como Dropzone se une a él) yid="yourDropzoneName"(usado para cambiar las opciones).Establezca las opciones de Dropzone, para configurar la url donde se publicarán el formulario y los archivos, desactive autoProcessQueue (para que solo ocurra cuando el usuario presione ''enviar'') y permita la carga múltiple (si lo necesita).
Establezca la función init para usar Dropzone en lugar del comportamiento predeterminado cuando se hace clic en el botón Enviar.
Aún en la función init, use el controlador de eventos "sendingmultiple" para enviar los datos del formulario junto con los archivos.
Voilà! Ahora puede recuperar los datos como lo haría con un formulario normal, en $ _POST y $ _FILES (en el ejemplo esto sucedería en upload.php)
HTML
<form action="upload.php" enctype="multipart/form-data" method="POST">
<input type="text" id ="firstname" name ="firstname" />
<input type="text" id ="lastname" name ="lastname" />
<div class="dropzone" id="myDropzone"></div>
<button type="submit" id="submit-all"> upload </button>
</form>
JS
Dropzone.options.myDropzone= {
url: ''upload.php'',
autoProcessQueue: false,
uploadMultiple: true,
parallelUploads: 5,
maxFiles: 5,
maxFilesize: 1,
acceptedFiles: ''image/*'',
addRemoveLinks: true,
init: function() {
dzClosure = this; // Makes sure that ''this'' is understood inside the functions below.
// for Dropzone to process the queue (instead of default form behavior):
document.getElementById("submit-all").addEventListener("click", function(e) {
// Make sure that the form isn''t actually being sent.
e.preventDefault();
e.stopPropagation();
dzClosure.processQueue();
});
//send all the form data along with the files:
this.on("sendingmultiple", function(data, xhr, formData) {
formData.append("firstname", jQuery("#firstname").val());
formData.append("lastname", jQuery("#lastname").val());
});
}
}
El tutorial de Enyo es excelente.
Descubrí que el script de muestra en el tutorial funcionaba bien para un botón incrustado en la zona de soltar (es decir, el elemento de formulario). Si desea tener el botón fuera del elemento de formulario, pude lograrlo usando un evento de clic:
Primero, el HTML:
<form id="my-awesome-dropzone" action="/upload" class="dropzone">
<div class="dropzone-previews"></div>
<div class="fallback"> <!-- this is the fallback if JS isn''t working -->
<input name="file" type="file" multiple />
</div>
</form>
<button type="submit" id="submit-all" class="btn btn-primary btn-xs">Upload the file</button>
Entonces, la etiqueta de script ...
Dropzone.options.myAwesomeDropzone = { // The camelized version of the ID of the form element
// The configuration we''ve talked about above
autoProcessQueue: false,
uploadMultiple: true,
parallelUploads: 25,
maxFiles: 25,
// The setting up of the dropzone
init: function() {
var myDropzone = this;
// Here''s the change from enyo''s tutorial...
$("#submit-all").click(function (e) {
e.preventDefault();
e.stopPropagation();
myDropzone.processQueue();
});
}
}
Aquí hay otra forma de hacerlo: agregue un div en su formulario con un nombre de clase dropzone e implemente dropzone programmatically.
HTML:
<div id="dZUpload" class="dropzone">
<div class="dz-default dz-message"></div>
</div>
JQuery:
$(document).ready(function () {
Dropzone.autoDiscover = false;
$("#dZUpload").dropzone({
url: "hn_SimpeFileUploader.ashx",
addRemoveLinks: true,
success: function (file, response) {
var imgName = response;
file.previewElement.classList.add("dz-success");
console.log("Successfully uploaded :" + imgName);
},
error: function (file, response) {
file.previewElement.classList.add("dz-error");
}
});
});
Nota: Desactivando autoDiscover, de lo contrario, Dropzone intentará adjuntar dos veces
Artículo del blog : Dropzone js + Asp.net: forma fácil de cargar imágenes masivas