¿Cómo establecer un valor para una entrada de archivo en HTML?


Respuestas:


525

No puede, por razones de seguridad.

Imagina:

<form name="foo" method="post" enctype="multipart/form-data">
    <input type="file" value="c:/passwords.txt">
</form>
<script>document.foo.submit();</script>

No quieres que los sitios web que visitas puedan hacer esto, ¿verdad? =)


¿Puedes aclararlo? Me molesta que el nombre del archivo se recuerde cada vez que vuelvo a visitar. Pelase vea stackoverflow.com/questions/41807471/…
Mawg dice que reinstale a Monica el

1
Entiendo el problema de seguridad, pero ¿no debería ser capaz el navegador de distinguir entre una ruta de archivo local peligrosa y algo más inocuo como un dataUrl? Tal vez es un sueño imposible.
cowlinator

55
¿Qué pasa con la función de arrastrar y soltar, no hay forma de configurar ese archivo en el campo de entrada?
Vedmant

1
@Vedmant Sí, puede establecer el valor del elemento de archivo con un evento de arrastrar / soltar en otros elementos. Consulte ¿Cómo establecer el valor de entrada del archivo mediante programación (es decir, al arrastrar y soltar archivos)?
Samuel Liew

129

No puedes

La única forma de establecer el valor de una entrada de archivo es que el usuario seleccione un archivo.

Esto se hace por razones de seguridad. De lo contrario, podría crear un JavaScript que cargue automáticamente un archivo específico desde la computadora del cliente.


51

No es una respuesta a su pregunta (que otros han respondido), pero si desea tener alguna funcionalidad de edición de un campo de archivo cargado, lo que probablemente quiera hacer es:

  • muestra el valor actual de este campo simplemente imprimiendo el nombre del archivo o la URL, un enlace en el que se puede hacer clic para descargarlo, o si es una imagen: simplemente muéstrelo, posiblemente como una miniatura
  • la <input>etiqueta para cargar un nuevo archivo
  • una casilla de verificación que, cuando está marcada, elimina el archivo cargado actualmente. tenga en cuenta que no hay forma de cargar un archivo 'vacío', por lo que necesita algo como esto para borrar el valor del campo

1
Creo que esto es lo que necesito. Si deseo editar la información del producto (no quiero cambiar la imagen del producto), ¿cómo debo configurar <input type="file" />la imagen del producto existente? Puedo mostrar la imagen existente en una <img />etiqueta, pero cuando envío no se pasa el archivo.
Partho63

37

No puedes Y es una medida de seguridad. ¿Imagínese si alguien escribe un JS que establece el valor de entrada del archivo en algún archivo de datos confidenciales?


10

Como todos los demás aquí han declarado: No puede cargar un archivo automáticamente con JavaScript.

¡SIN EMBARGO! Si tiene acceso a la información que desea enviar en su código (es decir, no contraseñas.txt), puede cargarla como un tipo de blob y luego tratarla como un archivo.

Lo que el servidor terminará viendo será indistinguible de alguien que realmente establezca el valor de <input type="file" />. El truco, en última instancia, es comenzar un nuevo XMLHttpRequest () con el servidor ...

function uploadFile (data) {
        // define data and connections
    var blob = new Blob([JSON.stringify(data)]);
    var url = URL.createObjectURL(blob);
    var xhr = new XMLHttpRequest();
    xhr.open('POST', 'myForm.php', true);

        // define new form
    var formData = new FormData();
    formData.append('someUploadIdentifier', blob, 'someFileName.json');

        // action after uploading happens
    xhr.onload = function(e) {
        console.log("File uploading completed!");
    };

        // do the uploading
    console.log("File uploading started!");
    xhr.send(formData);
}

    // This data/text below is local to the JS script, so we are allowed to send it!
uploadFile({'hello!':'how are you?'});

Entonces, ¿para qué podrías usar esto? Lo uso para cargar elementos de lienzo HTML5 como jpg. Esto le ahorra al usuario la molestia de tener que abrir un file inputelemento, solo para seleccionar la imagen local en caché que acaba de cambiar de tamaño, modificar, etc. Pero debería funcionar para cualquier tipo de archivo.


1

1) El problema del valor predeterminado en una entrada de archivo NO SE "hace por razones de seguridad", sino que los navegadores "simplemente no lo implementaron, sin ninguna buena razón": vea este informe detallado

2) Una solución simple puede ser usar una entrada de texto sobre la entrada del archivo, como aquí . Por supuesto, necesita algún código para enviar el archivo, utilizando ahora el valor en la entrada de texto y no la entrada del archivo.

En mi caso, hacer la aplicación HTA, eso no es un problema, no uso el formulario en absoluto.


-4

Definir en html:

<input type="hidden" name="image" id="image"/>

En JS:

ajax.jsonRpc("/consulta/dni", 'call', {'document_number': document_number})
    .then(function (data) {
        if (data.error){
            ...;
        }
        else {
            $('#image').val(data.image);
        }
    })

Después:

<input type="hidden" name="image" id="image" value="/9j/4AAQSkZJRgABAgAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8U..."/>
<button type="submit">Submit</button>

-8

En realidad podemos hacerlo. podemos establecer el valor predeterminado del archivo utilizando el control de navegador web en c # usando la biblioteca FormToMultipartPostData. Tenemos que descargar e incluir esta biblioteca en nuestro proyecto. Webbrowser permite al usuario navegar por páginas web dentro del formulario. Una vez cargada la página web, se ejecutará el script dentro del webBrowser1_DocumentCompleted. Entonces,

private void webBrowser1_DocumentCompleted(object sender, WebBrowserDocumentCompletedEventArgs e)
    {
       FormToMultipartPostData postData = 
            new FormToMultipartPostData(webBrowser1, form);
        postData.SetFile("fileField", @"C:\windows\win.ini");
        postData.Submit();
    }

Consulte el siguiente enlace para descargar y referencia completa.

https://www.codeproject.com/Articles/28917/Setting-a-file-to-upload-inside-the-WebBrowser-com


3
¿Para qué idioma es esto? No es javascript.
John
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.