11

ファイルの一部（最初のMBのみ）をアップロードする必要があります。ファイル全体をアップロードするPHPスクリプトを作成しました。データ（formDataオブジェクト）はajax呼び出しによって渡されます。

私の考えは、ファイルをjavascript（jquery）で分割することです。私の要求に対する解決策はありますか？

現在のコード：

function start(a){
    //var fSize = $('#fileUpload')[0].files[0].size / 1024;
    var formData = new FormData();    
    formData.append( 'fileUpload', $('#fileUpload')[0].files[0] );
    //AJAX
    $.ajax({
        url: 'script.php',
        type: 'POST',
        data: formData,
        processData: false,
        contentType: false,
        success: function(msg){
            alert("Win: " + msg);
        },
        error: function(bla, msg){
            alert("Fail: " + msg);
        }
    });
}
4

1 に答える 1

21

かなり新しい技術であるを使用しているので、新しい技術を使っFormDataたものも紹介します。

まず、FileReaderオブジェクトを含むファイルを読み取ります。

var fr = new FileReader(), buf, file = $('#fileUpload')[0].files[0];
fr.onload = function(e) {
    buf = new Uint8Array(e.target.result);
};
fr.readAsArrayBuffer(file);

Blob次に、分割された部分ごとにを作成できます（1e6それぞれの長さはバイト）。

for (var i = 0, blobs = []; i < buf.length; i += 1e6)
    blobs.push(new Blob([buf.subarray(i, i + 1e6)]));

Blob最後に、すべてのをFormDataオブジェクトに追加できます。

var formData = new FormData();
for (var i = 0; i < blobs.length; i++)
    formData.append("slice" + i, blobs[i], file.name + ".part" + i);

あなたは大丈夫なはずです。しかし、私はそれをテストしていません。

パフォーマンスについても何も知りません。あなたも使うことができるので、文字列fr.readAsBinaryStringを作ることができe.target.resultます。このように、Blob単純な// / whateverを使用してsをsubstring作成sliceできsubstrますが、Unicode文字などに問題がある可能性があると思います。さらに、おそらくそれは遅いです。

すべてをより一貫性のあるスニペットに入れる：

$('#fileUpload').change(function() {
    // If no file is selected, there's nothing to do
    if (!this.files.length) return;

    var fr = new FileReader(), file = this.files[0];
    fr.onload = function(e) {
        splitAndSendFile(new Uint8Array(e.target.result), file);
    };
    fr.readAsArrayBuffer(file);
};

function splitAndSendFile(dataArray, file) {
    var i = 0, formData, blob;
    for (; i < dataArray.length; i += 1e6) {
        blob = new Blob([dataArray.subarray(i, i + 1e6)]);
        formData = new FormData();
        formData.append("fileUpload", blob, file.name + ".part" + (i / 1e6));
        $.ajax({
            url: 'script.php',
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            success: function(msg){
                alert("Win: " + msg);
            },
            error: function(bla, msg){
                alert("Fail: " + msg);
            }
        });
    }
}

注： 3番目のオプションのパラメーターを取ります。これは、またはFormData.appendの場合はファイルの名前である必要があります。指定しない場合、sは予測できないランダムなファイル名を取得する可能性があります。FileBlobBlob

おそらく、そのパラメーターは標準ではなく、MDN記事には記載されていませんが、それでも上記のスニペットで使用しました。とにかく、自分が何をしているのかがわかっている場合は、ファイル名を指定するためのいくつかのオプションがあります。たとえばformData.append("filename", file.name)、リクエストでカスタムヘッダーを使用または送信します。

于 2012-08-21T13:53:42.247 に答える