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.