3

Como faço para verificar se um arquivo foi selecionado?

<input type="file" id="id-input-file-2" name="arquivo" class="form-control arquivo" />

Com a confirmação, irei iniciar o upload automaticamente, sem a necessidade de clicar em algum botão.

2 Respostas 2

3

você pode usar uma validação HTML5

<form>
  <div>
    <input type="file" required />
  </div>
  <div>
    <input type="submit" value="enviar" />
  </div>
</form>

ou simplesmente verificar se o input possui valor:

var fileUpload = document.getElementById("fileUpload");
var enviar = document.getElementById("enviar");
enviar.addEventListener("click", function (event) {
  if (fileUpload.files.length == 0) {
    alert("Nenhum Arquivo Selecionado");
    return;
  }

  if (fileUpload.files[0].type.indexOf("image") != 0) {
    alert("Este arquivo não é uma imagem");
    return;
  }
})
<form>
  <div>
    <input id="fileUpload" type="file" />
  </div>
  <div>
    <input id="enviar" type="button" value="enviar" />
  </div>
</form>

quanto ao seu problema em especifico, pode usar o evento change do input:

var arquivo = document.getElementById("arquivo");
var formulario = document.getElementById("formulario");

arquivo.addEventListener("change", function (event) {
  if (arquivo.files.length == 0) {
    alert("Nenhum Arquivo Selecionado");
    return;
  }

  //Enviando o Arquivo por AJAX e monitorando o Progresso.
  var data = new FormData(formulario);
  var xmlHttp = new XMLHttpRequest();
  xmlHttp.open("POST", urlEnvio);
  xmlHttp.upload.onprogress = function(event) {
    if (event.lengthComputable) {
      var progresso = (event.loaded / event.total) * 100;
    }
  };
  xmlHttp.send(data);
})
<form id="formulario">
  <div>
    <input id="arquivo" type="file" />
  </div>
</form>

Caso prefira, você pode montar o FormData na unha, neste caso o input não vai precisar pertencer a um form:

var data = new FormData();
data.append("arquivo", arquivo.files[0]);

Como solicitado o mesmo codigo em jQuery, particulamente não vejo necessidade de usar jQuery neste caso.

var arquivo = $("#arquivo");

arquivo.on("change", function (event) {
  if (event.target.files.length == 0) {
    alert("Nenhum Arquivo Selecionado");
    return;
  }

  var data = new FormData();
  data.append("arquivo", event.target.files[0]);

  $.ajax({
    type: "POST",
    url: urlEnvio,
    data: data,
    success: function (response) { },
    dataType: dataType,
    processData: false,
    xhr: function() {
      var xmlHttp = $.ajaxSettings.xhr();
      xmlHttp.upload.onprogress = function(event) {
        if (event.lengthComputable) {
          var progresso = (event.loaded / event.total) * 100;
        }
      };
      return xmlHttp;
    }
  });
})
<form id="formulario">
  <div>
    <input id="arquivo" type="file" />
  </div>
</form>

4
  • Sabe verificar usando jquery? Tem menos código.
    – Tiago
    4/09/2015 às 16:34
  • $('#arquivo')[0].files.length, mas não vejo vantagem em fazer assim. 4/09/2015 às 16:43
  • Seria assim $('#arquivo')[0].files.length(function){
    – Tiago
    4/09/2015 às 17:04
  • @Tiago, inclui um exemplo usando jQuery, porem não vejo ganho em usar jQuery para este problema, assim sendo um otimo exemplo de situação onde não se precisa do mesmo. 4/09/2015 às 17:27
-4

Você pode usar o HTML5 para ter certeza que o arquivo foi selecionado. Adicione o parametro required dentro do seu input

<input type="file" id="id-input-file-2" name="arquivo" class="form-control arquivo" required />

Se o usuario tentar enviar form sem selecionar algum arquivo o alert padrão ira aparecer.

7
  • Preciso da confirmação para iniciar o upload automaticamente.
    – Tiago
    4/09/2015 às 15:42
  • Faça com PHP, eu acho melhor! se não quiser redirecionar para outra pagina ou que a pagina não seja carregada use Ajax
    – RFL
    4/09/2015 às 15:46
  • PHP verifica se um objeto esta selecionado?
    – Tiago
    4/09/2015 às 15:51
  • Sim, verifica...voce pode verificar na mesma pagina ou em outra pagina, porém a pagina é sempre recarregada quando o usuario clicar em enviar.
    – RFL
    4/09/2015 às 15:52
  • Você esta fazendo confusão amigo. Preciso fazer exatamente como anunciado.
    – Tiago
    4/09/2015 às 15:53

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .