1

使用我的 chrome 扩展程序，我想在文件上传到网站之前抓取一个文件（并可能更改它）。特别是来自文件输入。换句话说，如果我选择一个带有 input[type=file] 的文件，我希望我的 chrome 扩展程序中断任何提交并获取文件。然后我的扩展程序将它的魔力应用于文件，然后可以提交/上传文件。我该如何处理？

文件路径出现问题。如果我获取文件输入的值，由于 HTML5 标准和兼容性问题，它总是将实际路径更改为“C:\fakepath\”。那我该如何访问该文件？也许它暂时保存在某些 chrome 存储中？

编辑：好吧，我设法读取了在文件输入中选择的文件，如下所示：

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. ArrayBuffer使用FileReaderAPI读取文件。
  3. 将结果ArrayBuffer包装在视图中后进行修改。
  4. Blob从修改后的数据创建一个。

  5. 通过创建FormData实例重构表单，然后使用该.append(name, value[, filename])方法。
    注意：在下面的示例中，我没有包含表单重构方法。我只包括了文件上传部分。重构表单有两种方法：

    1. 编写一个特定于您的表单的方法。
    2. 编写一个通用的表单解析方法，该方法处理无名/禁用/未检查/...元素。如果您想走这条路，请查看W3 规范的表单提交算法。
  6. 使用XMLHttpRequest提交数据。注意：如果您在 Chrome 扩展程序的上下文中运行此代码，请不要忘记permissions在清单文件的部分中明确将 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 回答