☰

jQuery アップロードの進行状況と AJAX ファイルのアップロード 質問する

tag-icon • tag-icon ajax jquery file-upload nginx
jQuery アップロードの進行状況と AJAX ファイルのアップロード 質問する

私の問題が明確に伝わっていないようです。ファイルを送信する必要があります（AJAXを使用）。そして、Nginx HttpUploadProgressモジュールこの問題に対する適切な解決策が必要です。jquery.uploadprogress プラグインを試してみましたが、すべてのブラウザーで動作し、AJAX を使用してファイルを送信するには、プラグインの大部分を書き直す必要があることがわかりました。

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

私は jquery.uploadprogress プラグイン NginxHttpUploadProgressModule からファイルのアップロードの進行状況を取得します。これは Facebook アプリケーションの iframe 内にあります。Firefox では動作しますが、Chrome/Safari では失敗します。

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

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

どうすれば修正できると思いますか?

完了したら、AJAX を使用してファイルを送信したいと思います。どのように実装すればよいでしょうか?

編集：
これはすぐに必要であり、重要なので、この質問に 100 ポイントの懸賞をかけることにしました。最初に回答した人が 100 ポイントを獲得します。

編集2:
Jake33 は最初の問題を解決するのに協力してくれました。Ajax でファイルを送信する方法を最初に回答した人には 100 ポイントが贈られます。

ベストアンサー1

最近では、AJAX でファイルをアップロードすることが実際に可能になりました。そうです、AJAX です。swf や java のような質の悪い AJAX の真似物ではありません。

次の例が役に立つかもしれません:https://webblocks.nl/tests/ajax/ファイルドラッグドロップ.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);

filetypeof はどこにありますかBlob:http://www.w3.org/TR/FileAPI/

もう 1 つの (より良い) 方法は、 を使用することです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;
}

おすすめ記事