A maneira mais simples e robusta de fazer isso no passado é simplesmente direcionar uma tag oculta do iFrame com seu formulário - ela será enviada no iframe sem recarregar a página.
Ou seja, se você não quiser usar um plug-in, JavaScript ou qualquer outra forma de "mágica" que não seja HTML. Claro que você pode combinar isso com JavaScript ou o que você tem ...
<form target="iframe" action="" method="post" enctype="multipart/form-data">
<input name="file" type="file" />
<input type="button" value="Upload" />
</form>
<iframe name="iframe" id="iframe" style="display:none" ></iframe>
Você também pode ler o conteúdo do iframe onLoad
para erros do servidor ou respostas bem-sucedidas e, em seguida, enviá-lo para o usuário.
Chrome, iFrames e onLoad
Você só precisa continuar lendo se estiver interessado em como configurar um bloqueador de interface do usuário ao fazer upload / download
Atualmente, o Chrome não aciona o evento onLoad para o iframe quando usado para transferir arquivos. Firefox, IE e Edge disparam o evento onload para transferências de arquivos.
A única solução que encontrei para o Chrome foi usar um cookie.
Para fazer isso basicamente quando o upload / download é iniciado:
- [Lado do cliente] Inicie um intervalo para procurar a existência de um cookie
- [Lado do servidor] Faça o que precisar com os dados do arquivo
- [Lado do servidor] Defina o cookie para o intervalo do lado do cliente
- O intervalo [do lado do cliente] vê o cookie e o usa como o evento onLoad. Por exemplo, você pode iniciar um bloqueador de interface do usuário e, em seguida, ao carregar (ou quando o cookie é criado), você remove o bloqueador de interface do usuário.
Usar um cookie para isso é feio, mas funciona.
Eu criei um plugin jQuery para lidar com esse problema do Chrome ao fazer o download, você pode encontrar aqui
https://github.com/ArtisticPhoenix/jQuery-Plugins/blob/master/iDownloader.js
O mesmo princípio básico também se aplica ao upload.
Para usar o downloader (inclua o JS, obviamente)
$('body').iDownloader({
"onComplete" : function(){
$('#uiBlocker').css('display', 'none'); //hide ui blocker on complete
}
});
$('somebuttion').click( function(){
$('#uiBlocker').css('display', 'block'); //block the UI
$('body').iDownloader('download', 'htttp://example.com/location/of/download');
});
E no lado do servidor, pouco antes de transferir os dados do arquivo, crie o cookie
setcookie('iDownloader', true, time() + 30, "/");
O plug-in verá o cookie e acionará o onComplete
retorno de chamada.