Skip to main content
4 de 5
adicionou 641 caracteres ao conteúdo
Syzoth
  • 100,5mil
  • 23
  • 169
  • 361

O required não vai impedir de disparar a função upload dependendo da maneira que você escreveu o script, o upload irá processar mesmo que vazio, isto é porque o progresso de upload não é do teu arquivo, mas é do envio de qualquer coisa atravez da requisição.

No caso você fez isto:

<input type = "submit" id="salvar" name="salvar" onclick="javascript:upload();" value = "ENVIAR!" class="btn">

O onclick não consegue detectar o required, pois onclick detecta clicks e não disparos de forms. Para isto remove ele.

O conteúdo de arquivos por upload são enviados via multi-part, então mesmo que não envie o arquivo ainda sim a requisição é enviada, para evitar que dispare o evento você pode simplesmente usar preventDefault dentro de onsubmit, algo como (versão resumida):

<form id="cadastro" name="cadastro" enctype="multipart/form-data" method="POST" action="SalvarArquivo.php">

<input type="file" id="arquivo" name="arquivo" required>

<br>Andamento:<br><progress id="progressbar" value="0" max="100"></progress><br>
<input type="submit" id="salvar" name="salvar" value="ENVIAR!" class="btn">

</form>

E o javascript ficará assim:

var formCadastro = document.getElementById("cadastro");
var btnSalvar    = document.getElementById("salvar");

formCadastro.addEventListener("submit", function (event)
{
    event.preventDefault(); //Isto irá evitar o disparo prévio

    formCadastro.disabled = true;
    btnSalvar.disabled = true;

    //Se ocorrer algum erro de segurança ou qualquer outra coisa evita redirecionar
    setTimeout(upload, 1);

    return false;
});

Note que isto irá evitar o progressbar mostrar 100% acaso não selecione nenhum arquivo (dependendo do atributo required="" que você citou)

Agora sobre o Safari você precisa explicar exatamente o que não está funcionando. Qual o comportamento, se for o required que não funciona tente isto:

document.getElementById("meuForm").addEventListener("submit", function (event)
{
    event.preventDefault(); //Isto irá evitar o disparo prévio

    //Se ocorrer algum erro de segurança ou qualquer outra coisa evita redirecionar
    if (document.getElementById('arquivo').files[0]) {
        setTimeout(upload, 1);
    } else {
        alert("Arquivo não selecionado");
    }

    return false;
});

var formCadastro = document.getElementById("cadastro");
var btnSalvar    = document.getElementById("salvar");

formCadastro.addEventListener("submit", function (event)
{
    event.preventDefault(); //Isto irá evitar o disparo prévio

    //Se ocorrer algum erro de segurança ou qualquer outra coisa evita redirecionar
    if (document.getElementById('arquivo').files[0]) {
        formCadastro.disabled = true;
        btnSalvar.disabled = true;
        setTimeout(upload, 1);
    } else {
        alert("Arquivo não selecionado");
    }

    return false;
});

E dentro de upload faça isto:

function upload()
{
  var request = new XMLHttpRequest();
  request.upload.addEventListener("progress", uploadProgress, false);

  request.onreadystatechange = function()
  {
      if (request.readyState == 4) {
          formCadastro.disabled = false;
          btnSalvar.disabled = false;
      }
  };

  //envia o form
  var formData = new FormData();
  formData.append("file", document.getElementById('arquivo').files[0]);
  request.open("POST", "SalvarArquivo.php");
  request.send(formData);
}

Não tenho um Mac com Safari para testar, mas acredito que da maneira que descrevi funciona para todos browsers.

Syzoth
  • 100,5mil
  • 23
  • 169
  • 361