將FileReader損壞到FormData中

我正在構建一個ajax文件上傳器，這可能要歸功於新的FormData界面。它可以工作，如果我使用原始文件，但如果我將文件轉換爲二進制字符串，然後到blob，則生成的文件已損壞。我究竟做錯了什麼？將FileReader損壞到FormData中

<!DOCTYPE html> 
<html> 
    <body> 
    <form method=post enctype=multipart/form-data id=form> 
     <input id=file type=file name=file> 
     <button id=1>1</button> 
     <button id=2>2</button> 
    </form> 
    <script> 
     var d = document; 

     function $(id) { return d.getElementById(id); }; 

     function xhr(fd) { 
     var x = new XMLHttpRequest(); 
     x.open('post', '/', true); 
     x.send(fd); 
     }; 

     $(1).addEventListener('click', function(e) { 
      e.preventDefault(); 
      var file = $('file').files[0]; 
      var fd = new FormData(); 
      fd.append('file', file); 
      xhr(fd); 
     }, false 
    ); 

     $(2).addEventListener('click', function(e) { 
      e.preventDefault(); 
      var file = $('file').files[0]; 
      var fr = new FileReader(); 
      fr.onload = function(e) { 
      var bb = new (window.BlobBuilder || 
       window.MozBlobBuilder || window.WebKitBlobBuilder)() 
      bb.append(e.target.result); 
      var b = bb.getBlob(file.type); 
      var fd = new FormData(); 
      fd.append('file', b); 
      xhr(fd); 
      }; 
      fr.readAsBinaryString(file); 
     }, false 
    ); 
    </script> 
    </body> 
</html>

Blob BlobBuilder FileReader FormData

編輯爲包括鏈接

來源

2011-08-27 aeosynth

我在Firefox/Chrome的工作由字符串轉換爲Uint8Array：

var result = e.target.result; 
var l = result.length 
var ui8a = new Uint8Array(l) 
for (var i = 0; i < l; i++) 
    ui8a[i] = result.charCodeAt(i); 
bb.append(ui8a.buffer)

來源

2011-08-27 14:17:59 aeosynth

我不熟悉的大多數對象，但我注意到，你的fr.onload函數參考file.type您第二個事件監聽器。 file是否在這個範圍內？你不應該使用e嗎？

來源

2011-08-27 01:20:41

我加了一些鏈接。是的，'文件'仍然在範圍內;內部函數可以訪問外部函數的範圍。 http://stackoverflow.com/questions/500431/javascript-variable-scope https://developer.mozilla.org/zh/JavaScript/Reference/Functions_and_function_scope#Nested_functions_and_closures – aeosynth

有趣的是，我不知道。 –

將FileReader損壞到FormData中

回答

相關問題