validacion - validar formulario javascript html5
¿Cómo establecer el valor de entrada del archivo al colocar el archivo en la página? (1)
Descargo de responsabilidad: correcto a partir de diciembre de 2017 y solo para navegadores modernos.
TL; DR: ¡Sí, ahora puedes!
* si tiene un objeto dataTransfer o FileList
Anteriormente
, el cambio programático del campo de
input[type=file]
archivos
input[type=file]
estaba deshabilitado debido a vulnerabilidades de seguridad heredadas, que se corrigen en los navegadores modernos.
El último de los principales navegadores (Firefox), recientemente nos ha permitido configurar los archivos para el campo del archivo de entrada. Según las pruebas del W3C , ¡parece que ya puedes hacerlo en Google Chrome!
Captura de pantalla relevante y texto citado de MDN:
Puede establecer y obtener el valor de
HTMLInputElement.filesen todos los navegadores modernos.
Fuente y compatibilidad del navegador, ver
El hilo de discusión de corrección de errores de Firefox tiene esta demostración en la que puede probarla , y aquí está la fuente si desea editarla . Para referencia futura en caso de que este enlace muera, también lo incluiré como un fragmento ejecutable a continuación:
let target = document.documentElement;
let body = document.body;
let fileInput = document.querySelector(''input'');
target.addEventListener(''dragover'', (e) => {
e.preventDefault();
body.classList.add(''dragging'');
});
target.addEventListener(''dragleave'', () => {
body.classList.remove(''dragging'');
});
target.addEventListener(''drop'', (e) => {
e.preventDefault();
body.classList.remove(''dragging'');
fileInput.files = e.dataTransfer.files;
});
body {
font-family: Roboto, sans-serif;
}
body.dragging::before {
content: "Drop the file(s) anywhere on this page";
position: fixed;
left: 0; width: 100%;
top: 0; height: 100%;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.5em;
background-color: rgba(255, 255, 0, .3);
pointer-events: none;
}
button, input {
font-family: inherit;
}
a {
color: blue;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link href="https://fonts.googleapis.com/css?family=Roboto:400,400i,700" rel="stylesheet">
<title>JS Bin</title>
</head>
<body>
<h1>Drag and drop files into file input</h1>
<p><small>Supported in <a href="https://github.com/whatwg/html/issues/2861">WebKit and Blink</a>. To test, drag and drop one or more files from your operating system onto this page.</small></p>
<p>
<input type="file">
</p>
</body>
</html>
Nota IMPORTANTE:
Solo puede hacer esto si tiene un objeto
FileListOdataTransferexistente que puede establecer en el elemento del archivo de entrada (ya que el método setter NO acepta cadenas de texto sin formato).Para obtener más información, consulte la respuesta de Kaiido aquí: ¿Cómo establecer los objetos File y la propiedad de longitud en el objeto FileList donde los archivos también se reflejan en el objeto FormData?
Ahora para responder a su pregunta original, debería ser tan simple como esto:
document.querySelector(''.preview-image-instruction'')
.addEventListener(''drop'', (ev) => {
ev.preventDefault();
document.querySelector(''.image-url'').files = ev.dataTransfer.files;
});
Esta pregunta ya tiene una respuesta aquí:
Estoy intentando hacer un control donde ambos pueden seleccionar un archivo para enviar en el formulario y colocar un archivo en él para hacer lo mismo. Tengo algo como esto donde también mostrará una vista previa del archivo si es una imagen:
<div class="preview-image-container">
<input type="file" name="File" id="File" accept="image/*"
class="image-url form-control" style="display:none;" />
<div class="preview-image-dummy"></div><img class="preview-image-url" />
<div class="preview-image-instruction">
<div class="preview-image-btn-browse btn btn-primary">Select file</div>
<p>or drop it here.</p>
</div>
</div>
El usuario suelta el archivo en el
preview-image-container
.
El archivo no se envía con AJAX, el usuario debe enviar el formulario que contiene más datos.
Por razones de seguridad, no podemos cambiar el valor del archivo de entrada con JavaScript. Sin embargo, sé que el archivo de entrada predeterminado admite droppable y hay un montón de sitios web que nos permiten seleccionar archivos soltándolos en el formulario, así que supongo que hay una manera de hacerlo.
Como puede ver en MCVE, solo estoy interesado en usar jQuery o JavaScript puro sin bibliotecas adicionales.
Aunque podría usarse dropzone.js , no se ajusta a mis requisitos y requeriría una cantidad de tiempo considerable para personalizar su apariencia. Además, dropzone.js tiene ciertos requisitos de configuración que no se pueden cumplir dentro de mi aplicación ASP.NET.
Hay una pregunta similar pero no tiene una respuesta adecuada:
¿Cómo configurar el objeto de archivo en el archivo de entrada en el formulario en HTML?
Tampoco es similar al archivo de entrada y la vista previa de las imágenes de arrastrar y soltar antes de cargar porque ya he logrado la acción de arrastrar y soltar y previsualizar. Mi pregunta es específica sobre el problema de tener una entrada de archivo vacía al soltar el archivo en un contenedor principal.