Como definir um valor para uma entrada de arquivo em HTML?


337

Nota:

As respostas e comentários abaixo refletem o estado dos navegadores herdados em 2009. Agora você pode realmente definir o valor do elemento de entrada de arquivo de forma dinâmica / programática usando JavaScript e um objeto dataTransfer ou FileList em 2017.

Veja a resposta nesta pergunta para obter detalhes e também uma demonstração:
Como definir o valor de entrada do arquivo programaticamente (por exemplo: ao arrastar e soltar arquivos)?

Como posso definir o valor disso?

<input type="file" />

3
Fiz uma resposta completa referenciada e atualizada (dez 2013) sobre isso aqui: Lembre
repita a

Respostas:


524

Você não pode devido a razões de segurança.

Imagine:

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

Você não quer que os sites que você visite possam fazer isso, não é? =)


Você pode limpá-lo? Me incomoda que o nome do arquivo seja lembrado toda vez que eu revisito. Pelase ver stackoverflow.com/questions/41807471/…
Mawg diz reintegrar Monica

11
Entendo o problema de segurança, mas o navegador não deveria distinguir entre um caminho de arquivo local perigoso e algo mais inócuo como um dataUrl? Talvez seja um sonho.
cowlinator

5
E a função arrastar e soltar, não há como definir esse arquivo para o campo de entrada?
precisa saber é o seguinte

11
@Vedmant Sim, você pode definir o valor do elemento do arquivo com um evento de arrastar / soltar em outros elementos. Consulte Como definir o valor de entrada do arquivo programaticamente (por exemplo: ao arrastar e soltar arquivos)?
Samuel Liew

Se isso não funcionar, então ... como esse segmento de código sabe onde eu mantenho minhas senhas?
HoldOffHunger

129

Você não pode.

A única maneira de definir o valor de uma entrada de arquivo é pelo usuário selecionar um arquivo.

Isso é feito por razões de segurança. Caso contrário, você poderá criar um Javascript que carrega automaticamente um arquivo específico do computador do cliente.


51

Não é uma resposta para sua pergunta (que outras pessoas responderam), mas se você deseja ter alguma funcionalidade de edição de um campo de arquivo enviado, o que você provavelmente deseja fazer é:

  • mostre o valor atual desse campo imprimindo apenas o nome do arquivo ou o URL, um link clicável para baixá-lo ou se for uma imagem: mostre-o, possivelmente como miniatura
  • a <input>tag para fazer upload de um novo arquivo
  • uma caixa de seleção que, quando marcada, exclui o arquivo carregado no momento. observe que não há como fazer upload de um arquivo 'vazio'; portanto, você precisa de algo assim para limpar o valor do campo

11
Eu acho que é disso que eu preciso. Se eu quiser editar as informações do produto (não quero alterar a imagem do produto), como devo definir <input type="file" />a imagem do produto existente? Posso mostrar a imagem existente em uma <img />tag, mas quando envio não está passando o arquivo.
Partho63

37

Você não pode. E é uma medida de segurança. Imagine se alguém escreve um JS que define o valor de entrada do arquivo em algum arquivo de dados confidenciais?


9

Como todos os outros aqui declararam: Você não pode enviar um arquivo automaticamente com JavaScript.

CONTUDO! Se você tiver acesso às informações que deseja enviar no seu código (por exemplo, não passwords.txt), poderá enviá-las como um tipo de blob e tratá-las como um arquivo.

O que o servidor acabará vendo será indistinguível de alguém realmente configurando o valor de <input type="file" />. O truque, em última análise, é iniciar um novo XMLHttpRequest () com o 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?'});

Então, para que você poderia usar isso? Eu o uso para fazer upload de elementos de tela HTML5 como jpg. Isso evita que o usuário tenha que abrir um file inputelemento, apenas para selecionar a imagem em cache local que eles acabaram de redimensionar, modificar, etc. Mas deve funcionar para qualquer tipo de arquivo.


1

1) O problema do valor padrão em uma entrada de arquivo NÃO é "resolvido por motivos de segurança", mas os navegadores "apenas falharam em implementá-lo, sem uma boa razão": consulte este relatório detalhado

2) Uma solução simples pode ser usar uma entrada de texto em cima da entrada de arquivo, como aqui . Claro que você precisa de algum código para enviar o arquivo, usando agora o valor na entrada de texto e não na entrada do arquivo.

No meu caso, fazer um aplicativo HTA, isso não é um problema, não uso o formulário.


-4

Defina em html:

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

Em JS:

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

Depois de:

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

-8

Na verdade, nós podemos fazer isso. podemos definir o valor padrão do arquivo usando o controle de navegador da web em c # usando a biblioteca FormToMultipartPostData. Temos que baixar e incluir essa biblioteca em nosso projeto. O Navegador da Web permite ao usuário navegar em páginas da Web dentro do formulário. Depois que a página da web for carregada, o script dentro do webBrowser1_DocumentCompleted será executado. Assim,

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

Consulte o link abaixo para fazer o download e a referência completa.

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


2
Que idioma é esse? Não é javascript.
John
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.