1

私のChrome拡張機能を使用して、ファイルをWebサイトにアップロードする前に取得したい（そしておそらく変更したい）. 特にファイル入力から。別の言い方をすれば、input[type=file] でファイルを選択した場合、Chrome 拡張機能で送信を中断してファイルを取得する必要があります。次に、拡張機能がその魔法をファイルに適用し、その後、ファイルを送信/アップロードできます。どうすればこれにアプローチできますか?

ファイルパスで問題が発生します。ファイル入力の値を取得すると、HTML5 の標準と互換性の問題により、常に実際のパスが「 C:\fakepath\」に変更されます。どうすればファイルにアクセスできますか？多分それはいくつかのクロムストレージに一時的に保存されていますか?

編集:まあ、私はこのようにファイル入力で選択されたファイルを読み取ることができました:

var file;
$('input[type=file]').change(function(e){
    file = e.target.files[0];
    var reader = new FileReader();      
    reader.onload = function (event) {
        console.log(event.target.result);  //contains the file data
        //maybe change data and use filewriter  

    };      
    reader.readAsDataURL(file);
};

FileWriter を使用して e.target.files[0] に書き込みたいと思います

http://www.html5rocks.com/en/tutorials/file/filesystem/のチュートリアルに従い ましたが、適切な FileWriter を作成できません。

ディスク上の元のファイルに書き込む必要はありません (不可能かもしれません) が、対応するファイル入力フォーム フィールドでアップロードに使用されるデータを変更する必要があります。

4

1 に答える 1

5

リクエストのペイロードをインターセプトするためのChrome拡張機能用の定義済みAPIはありません（進行中の作業）。

そうは言っても、Contentスクリプトを使用して、次のようなイベントリスナーを追加 できます。

  1. 通常のフォーム送信をキャンセルします。
  2. APIArrayBufferを使用してファイルを読み取ります。FileReader
  3. ビューArrayBufferでラップした後、結果を変更します。
  4. 変更したデータからを作成しBlobます。

  5. FormDataインスタンスを作成してフォームを再構築してから、.append(name, value[, filename])メソッドを使用します。
    注：以下の例では、フォームの再構築方法は含まれていません。ファイルアップロード部分のみを含めました。フォームを再構築するには、次の2つの方法があります。

    1. フォームに固有のメソッドを記述します。
    2. 名前のない/無効/チェックされていない/...要素を処理する一般的なフォーム解析メソッドを記述します。このルートを使用する場合は、フォーム送信アルゴリズムのW3仕様を参照してください。
  6. を使用しXMLHttpRequestてデータを送信します。permissions注：Chrome拡張機能のコンテキストでこのコードを実行している場合は、マニフェストファイルのセクションでURLを明示的にホワイトリストに登録することを忘れないでください。

実装例は次のとおりです。

// Reference to the form:
var form = document.forms["uploadForm"];
form.addEventListener('submit', function(ev) {
    ev.preventDefault(); // Cancel submission

    var fileInput = form.querySelector('input[type="file"]');
    var file = fileInput.files[0];
    if (!file) return; // No file selected

    var fileReader = new FileReader();
    fileReader.onload = function() {
        var arraybuffer = fileReader.result;
        // To manipulate an arraybuffer, wrap it in a view:
        var view = new Uint8Array(arraybuffer);
        view[0] = 0; // For example, change the first byte to a NULL-byte

        // Create an object which is suitable for use with FormData
        var blob = new Blob([view], {type: file.type});

        // Now, the form reconstruction + upload part:
        var formData = new FormData();
        formData.append(fileInput.name, blob, file.name);
        // ... handle remainder of the form ...

        // Now, submit the form
        var xhr = new XMLHttpRequest();
        xhr.open('POST', form.action);
        xhr.onload = function() {
            // Do something. For example:
            alert(xhr.responseText);
        };
        xhr.onerror = function() {
            console.log(xhr); // Aw. Error. Log xhr object for debugging
        }
        xhr.send(formData);
    };
    fileReader.readAsArrayBuffer(file);
});
于 2012-07-24T10:14:45.097 に答える