web-dev-qa-db-ja.com

jQuery Upload ProgressおよびAJAXファイルのアップロード

問題を明確に伝えていないようです。 （AJAXを使用して）ファイルを送信する必要があり、 Nginx HttpUploadProgressModule を使用してファイルのアップロードの進行状況を取得する必要があります。この問題に対する適切な解決策が必要です。 jquery.uploadprogressプラグインを試しましたが、すべてのブラウザーで機能するように、またAJAXを使用してファイルを送信するために、その多くを書き直さなければならないことに気づきました。

必要なのはこれを行うためのコードだけで、すべての主要なブラウザー（Chrome、Safari、FireFox、およびIE）で動作する必要があります。複数のファイルのアップロードを処理するソリューションを入手できればさらに良いでしょう。

jquery.uploadprogress plugin を使用して、NginxHttpUploadProgressModuleからファイルのアップロードの進行状況を取得しています。これは、facebookアプリケーションのiframe内にあります。 firefoxでは動作しますが、chrome/safariでは失敗します。

コンソールを開くと、これが表示されます。

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

どのようにそれを修正するのでしょうか？

また、完了時にAJAXを使用してファイルを送信したいと思います。どのように実装しますか？

編集：
すぐにこれが必要です。重要なので、この質問に100ポイントの報奨金を付けます。最初に回答した人には100ポイントが与えられます。

編集2：
Jake33は最初の問題の解決に役立ちました。 ajaxを使用してファイルを送信する方法を最初に回答した人は、100ポイントを受け取ります。

ajaxjqueryfile-uploadnginx
69
Conceited Code

ファイルのアップロードは、最近AJAXで実際に可能です。はい、AJAXです。swfやJavaのようなくだらないAJAXのようなものではありません。

この例はあなたを助けるかもしれません： https://webblocks.nl/tests/ajax/file-drag-drop.html

（ドラッグ/ドロップインターフェイスも含まれていますが、それは簡単に無視されます。）

基本的には次のようになります。

<input id="files" type="file" />

<script>
document.getElementById('files').addEventListener('change', function(e) {
    var file = this.files[0];
    var xhr = new XMLHttpRequest();
    (xhr.upload || xhr).addEventListener('progress', function(e) {
        var done = e.position || e.loaded
        var total = e.totalSize || e.total;
        console.log('xhr progress: ' + Math.round(done/total*100) + '%');
    });
    xhr.addEventListener('load', function(e) {
        console.log('xhr upload complete', e, this.responseText);
    });
    xhr.open('post', '/URL-HERE', true);
    xhr.send(file);
});
</script>

（デモ： http://jsfiddle.net/rudiedirkx/jzxmro8r/ ）

基本的には、これは=）です。

xhr.send(file);

fileはtypeof Blobです： http://www.w3.org/TR/FileAPI/

別の（より良いIMO）方法は、FormDataを使用することです。これにより、1）フォームのようにファイルに名前を付け、2）フォームのように他のもの（ファイルも）を送信できます。

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

FormDataは、サーバーコードをよりクリーンにし、下位互換性を高めます（リクエストの形式が通常のフォームとまったく同じになるため）。

それはすべて実験的なものではなく、非常に現代的なものです。 Chrome 8+およびFirefox 4+は何をすべきかを知っていますが、他のことについては知りません。

これは、PHPでリクエストを処理する方法です（リクエストごとに1つの画像）。

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;
}
203
Rudie

AJAXを使用してファイルをアップロードするためのいくつかのオプションを次に示します。

UPDATE：Multiple File Uploading のJQueryプラグインを次に示します。

16
jmort253