Progresso do upload do jQuery e upload do arquivo AJAX

Parece que não comuniquei claramente meu problema. Eu preciso enviar um arquivo (usando AJAX) e preciso obter o progresso do upload do arquivo usando o Nginx HttpUploadProgressModule . Eu preciso de uma boa solução para este problema. Eu tentei com o plugin jquery.uploadprogress, mas estou tendo que rewrite muito para fazê-lo funcionar em todos os navegadores e enviar o arquivo usando o AJAX.

Tudo que eu preciso é o código para fazer isso e ele precisa funcionar em todos os principais navegadores (Chrome, Safari, FireFox e IE). Seria ainda melhor se eu conseguisse uma solução que pudesse lidar com vários uploads de arquivos.

Eu estou usando o plugin jquery.uploadprogress para obter o progresso de upload de um arquivo do NginxHttpUploadProgressModule. Isso está dentro de um iframe para um aplicativo do Facebook. Funciona no firefox, mas falha no chrome / safari.

Quando eu abro o console eu entendo isso.

Uncaught ReferenceError: progressFrame is not defined jquery.uploadprogress.js:80 

Alguma ideia de como eu consertaria isso?

Eu também gostaria de enviar o arquivo usando o AJAX quando ele estiver concluído. Como eu implementaria isso?

EDITAR:
Eu preciso disso em breve e é importante, então vou colocar uma recompensa de 100 pontos nesta questão. A primeira pessoa a responder receberá 100 pontos.

EDIT 2:
Jake33 me ajudou a resolver o primeiro problema. A primeira pessoa a deixar uma resposta com como enviar o arquivo com ajax também receberá os 100 pontos.

O upload de arquivos é realmente possível com o AJAX nos dias de hoje. Sim, AJAX, não alguns wannabes ruins de AJAX como swf ou java.

Este exemplo pode ajudá-lo: https://webblocks.nl/tests/ajax/file-drag-drop.html

(Também inclui a interface de arrastar / soltar, mas é facilmente ignorada.)

Basicamente, o que acontece é:

   

(demo: http://jsfiddle.net/rudiedirkx/jzxmro8r/ )

Então basicamente o que acontece é isso =)

 xhr.send(file); 

Onde o file é typeof Blob : http://www.w3.org/TR/FileAPI/

Outra maneira (melhor IMO) é usar FormData . Isso permite que você 1) nomeie um arquivo, como em um formulário e 2) envie outras coisas (arquivos também), como em um formulário.

 var fd = new FormData; fd.append('photo1', file); fd.append('photo2', file2); fd.append('other_data', 'foo bar'); xhr.send(fd); 

FormData torna o código do servidor mais limpo e mais compatível (já que o pedido agora tem exatamente o mesmo formato dos formulários normais).

Tudo isso não é experimental, mas muito moderno. O Chrome 8+ e o Firefox 4+ sabem o que fazer, mas não sei sobre nenhum outro.

Foi assim que eu segurei o pedido (1 imagem por requisição) em PHP:

 if ( isset($_FILES['file']) ) { $filename = basename($_FILES['file']['name']); $error = true; // Only upload if on my home win dev machine if ( isset($_SERVER['WINDIR']) ) { $path = 'uploads/'.$filename; $error = !move_uploaded_file($_FILES['file']['tmp_name'], $path); } $rsp = array( 'error' => $error, // Used in JS 'filename' => $filename, 'filepath' => '/tests/uploads/' . $filename, // Web accessible ); echo json_encode($rsp); exit; } 

Aqui estão algumas opções para usar o AJAX para fazer upload de arquivos:

  • AjaxFileUpload – Requer um elemento de formulário na página, mas carrega o arquivo sem recarregar a página. Veja a demonstração .

  • Lista de plug-ins JQuery marcados com “Arquivo”

  • Uploadify – Um método baseado em Flash de upload de arquivos.

  • Como posso carregar arquivos de forma assíncrona?

  • Dez exemplos de upload de arquivo AJAX – Este foi publicado este ano.

ATUALIZAÇÃO: Aqui está um plug-in do JQuery para Upload de Vários Arquivos .