value - upload de arquivos javascript



Como definir o valor de entrada do arquivo ao descartar o arquivo na página? (1)

Eu estou tentando fazer um controle onde você pode selecionar um arquivo para enviar no formulário e soltar um arquivo nele para fazer a mesma coisa. Eu tenho algo parecido com isso, onde também mostrará uma prévia do arquivo se for uma imagem:

<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>

Aqui está um violino com o MCVE .

O usuário descarta o arquivo no preview-image-container . O arquivo não é enviado com o AJAX, o usuário precisa enviar o formulário que contém mais dados.

Por motivos de segurança, não podemos alterar o valor do arquivo de entrada com JavaScript. No entanto, eu sei que o arquivo de entrada padrão suporta droppable e há um monte de sites que nos permitem selecionar arquivos, soltando-os no formulário, então meu palpite é que há uma maneira de fazê-lo.

Como você pode ver no MCVE, estou interessado apenas em usar jQuery ou JavaScript puro sem bibliotecas adicionais.

Embora o dropzone.js possa ser usado, ele não se encaixa nos meus requisitos e exigiria uma quantidade considerável de tempo para personalizar sua aparência. Além disso, o dropzone.js tem certos requisitos de configuração que não podem ser atendidos no meu aplicativo ASP.NET.

Há uma pergunta semelhante, mas não tem uma resposta adequada:
Como definir o objeto de arquivo no arquivo de entrada no formulário em HTML?

Também não é semelhante para arrastar soltar arquivo de entrada de imagens e pré-visualização antes do upload, porque eu já consegui arrastar e soltar e visualizar a ação. Minha pergunta é específica para o problema de ter uma entrada de arquivo vazia ao descartar o arquivo em um contêiner pai.


Aviso de isenção: correto em dezembro de 2017 e apenas para navegadores modernos.

TL: DR: Sim, agora você pode!

* se você tiver um objeto dataTransfer ou FileList

Anteriormente , alterar programaticamente o campo de input[type=file] foi desativado devido a vulnerabilidades de segurança herdadas, que são corrigidas em navegadores modernos.

O último dos principais navegadores (Firefox), recentemente nos permitiu definir os arquivos para o campo de arquivo de entrada. De acordo com o teste W3C , parece que você já pode fazer isso no Google Chrome!

Captura de tela e texto relevantes citados do MDN:

Você pode definir e obter o valor de HTMLInputElement.files em todos os navegadores modernos.
Compatibilidade de origem e navegador, consulte

O tópico de discussão de correções de bugs do Firefox tem essa demonstração que você pode testar , e aqui está a fonte se você quiser editá-la . Para referência futura caso esse link morra, também o incluirei como um snippet executável abaixo:

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:

Você só pode fazer isso se tiver um objeto FileList OR dataTransfer existente que possa definir para o elemento de arquivo de entrada (já que o método setter NÃO aceita strings de texto simples).

Para obter mais informações, consulte a resposta do Kaiido aqui: Como definir objetos File e length no objeto FileList, onde os arquivos também são refletidos no objeto FormData?

Agora, para responder sua pergunta original, deve ser simples assim:

document.querySelector('.preview-image-instruction')
    .addEventListener('drop', (ev) => {
        ev.preventDefault();
        document.querySelector('.image-url').files = ev.dataTransfer.files;
    });




events