在上傳之前使用Chrome擴展名抓取文件

Question

使用我的Chrome擴展名我想在獲取文件上傳到網站之前抓取文件（也許可以更改）。特別是來自文件輸入。 換一種方式，如果我選擇一個文件與輸入[類型=文件]我想我的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。

沒有必要寫入磁盤上的原始文件 - 可能甚至不可能 - 但我需要在相應的文件輸入表單字段中更改用於上載的數據。

Answer 1

Chrome擴展沒有定義API來攔截請求的有效負載（work in progress）。

話雖這麼說，你可以使用一個Content script添加事件監聽器：

1. 取消正常的表單提交。
2. 使用FileReader API將該文件作爲ArrayBuffer讀取。
3. 修改結果ArrayBuffer包裝後view。
4. 從修改後的數據中創建一個Blob。

5. 通過創建FormData實例來重建表單，然後使用.append(name, value[, filename])方法。
   注：在下面的例子中，我做了而不是包含表單重構方法。我只包括文件上傳部分。有兩種方法來重建表單：

   1. 編寫一個特定於您的表單的方法。
   2. 編寫一個通用的表單解析方法，它處理無名/無效/未檢查/ ...元素。如果你想採取這條路線，看看W3 specification for the Form submission algorithm。
6. 提交數據using XMLHttpRequest。注意：如果您在Chrome擴展程序的上下文中運行此代碼，請不要忘記明確將網址列入permissions section in the manifest file。

下面是實現的一個例子：

// 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); 
});