Skip to main content
O moderador moveu os comentários para o chat
removeu 1232 caracteres do conteúdo
Fonte Link
Syzoth
  • 100,5mil
  • 23
  • 169
  • 361

E o javascript ficará assim (este script deve ir dentro de window.onload ou $.ready, exemplo usei $.ready mesmo):

var formCadastro = document$.getElementByIdready("cadastro"function();
var btnSalvar {
   = document.getElementById("salvar""cadastro");

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'"cadastro").files[0]) {
        setTimeout(upload, 1);
    } else {
        alert("Arquivo não selecionado");
    }

   disabled return= false;
});
true;
var formCadastro = document.getElementById("cadastro");
var btnSalvar    = document.getElementById("salvar");

formCadastro.addEventListener("submit",disabled function= (event)true;
{
    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ãoreturn selecionado");false;
    }

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

  request.onreadystatechange = function()
  {
      if (request.readyState == 4) {
          formCadastrodocument.getElementById("cadastro").disabled = false;
          btnSalvardocument.getElementById("salvar").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);
}

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;
});
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);
}

E o javascript ficará assim (este script deve ir dentro de window.onload ou $.ready, exemplo usei $.ready mesmo):

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

        document.getElementById("cadastro").disabled = true;
        document.getElementById("salvar").disabled = true;

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

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

  request.onreadystatechange = function()
  {
      if (request.readyState == 4) {
        document.getElementById("cadastro").disabled = false;
        document.getElementById("salvar").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);
}
adicionou 641 caracteres ao conteúdo
Fonte Link
Syzoth
  • 100,5mil
  • 23
  • 169
  • 361
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;
});
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;
});
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;
});
adicionou 269 caracteres ao conteúdo
Fonte Link
Syzoth
  • 100,5mil
  • 23
  • 169
  • 361

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="meuform">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>
var formCadastro = document.getElementById("meuForm""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;
});
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;
});

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);
}

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:

<form id="meuform">
<br>Andamento:<br><progress id="progressbar" value="0" max="100"></progress><br>
</form>
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
    setTimeout(upload, 1);

    return false;
});
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;
});

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>
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;
});
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;
});

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);
}
adicionou 269 caracteres ao conteúdo
Fonte Link
Syzoth
  • 100,5mil
  • 23
  • 169
  • 361
Carregando
Fonte Link
Syzoth
  • 100,5mil
  • 23
  • 169
  • 361
Carregando