使用HTML5技术操作和上传表单文件数据

我试图使用HTML5 FileReader和FileWriter API来操纵然后从文件类型输入标记上传操作数据。使用HTML5技术操作和上传表单文件数据

这是我到目前为止有：

$(function() { 
    $("#files").change(function(e) { 
    var files = e.target.files 
    , reader = new FileReader() 
    , i; 
    for(i=0; f = files[i]; ++i) { 
     f = doSomething(reader.readAsBinaryString(f)); // Manipulate the File 
    } 
    return true; 
    }); 
});

那么我将如何去实现DoSomething的方法？我需要返回表单然后可以提交的FileObject。目前这在任何浏览器上都可以使用吗？

谢谢。

来源

2011-05-30 Eric Koslow

有几件事情错了你目前的做法：

你不需要FileWriter API。没有HTML5 Filesystem API就不能使用。你需要的是File API: Writer spec的BlobBuilder API。

其次，FileReader读取方法是异步的，因此您不能像结果一样将结果传递到doSomething()。您还需要为每个文件创建一个单独的阅读器对象。

你可以尝试的一件事是读取文件作为ArrayBuffer，通过JS类型数组（Uint8Array）操纵其字节，从该缓冲区创建一个Blob，然后将结果发送到服务器。这样的事情可能工作（未经测试）：

$(function() { 
    $("#files").change(function(e) { 
    var files = e.target.files; 

    [].forEach.call(files, function(f, i) { 
     var reader = new FileReader(); 
     reader.onload = function(e) { 
     doSomething(this.result); 
     }; 
     reader.readAsArrayBuffer(f); 
    }); 

    return true; 
    }); 
}); 

var doSomething = function(arrayBuffer) { 
    // Create a unsigned 8-bit view from the underlying data buffer. 
    var ui8a = new Uint8Array(arrayBuffer); 
    for (var i = 0; i < ui8a.length; ++i) { 
    // Manipulate each byte. Its underlying arraybuffer will be changed. 
    // ui8a[i] = xxx // set byte at offset i to something. 
    } 

    var bb = new WebKitBlobBuilder(); // Build a blob from the arraybuffer data. 
    bb.append(ui8a.buffer); 

    upload(bb.getBlob('your/filemimetype')); 
}; 

var upload = function(blob) { 
    var xhr = new XMLHttpRequest(); 
    xhr.open('POST', '/server', true); 
    xhr.onload = function(e) { ... }; 
    xhr.send(blob); 
};

我不知道，如果你需要传递到bb.getBlob()的MIME类型，但是这将是你正在使用的文件的内容类型。尝试一下。

来源

2011-06-09 19:25:14 ebidel

啊，BlobBuilder，这就是我想念的。如果我想使用像[Gibberish Aes]（https://github.com/mdp/gibberish-aes）这样的库，它需要一个字符串并对其进行加密。我可以使用'readAsBinaryString'，上传加密的字符串，然后当有人下载并解密它时，以某种方式从二进制字符串构建文件？ – 2011-06-09 20:21:12

如果我理解正确，是的。 'BlobBuilder.append（）'被重载以接收多种类型，包括'DOMString'。然后调用'bb.getBlob（）'。 Blob是文件类对象（'File'从'Blob'继承）。 – ebidel 2011-06-09 21:39:57

使用HTML5技术操作和上传表单文件数据

回答

相关问题