使用JavaScript或jQuery拆分文件
我需要上传文件的一部分(只有第一个MB)。 我已经创建了一个PHP脚本来上传整个文件。 数据( formData
Object)由ajax调用传递。
我的想法是现在用javascript(jquery)拆分文件。 我的请求有什么解决方案吗?
当前代码:
function start(a){ //var fSize = $('#fileUpload')[0].files[0].size / 1024; var formData = new FormData(); formData.append( 'fileUpload', $('#fileUpload')[0].files[0] ); //AJAX $.ajax({ url: 'script.php', type: 'POST', data: formData, processData: false, contentType: false, success: function(msg){ alert("Win: " + msg); }, error: function(bla, msg){ alert("Fail: " + msg); } }); }
由于你使用的是FormData
,这是一项相当新的技术,我也会向你展示一些新技术。
首先,使用FileReader
对象读取文件:
var fr = new FileReader(), buf, file = $('#fileUpload')[0].files[0]; fr.onload = function(e) { buf = new Uint8Array(e.target.result); }; fr.readAsArrayBuffer(file);
然后,您可以为每个1e6
部件创建一个Blob
(每个1e6
字节长):
for (var i = 0, blobs = []; i < buf.length; i += 1e6) blobs.push(new Blob([buf.subarray(i, i + 1e6)]));
最后,您可以将所有Blob
添加到FormData
对象:
var formData = new FormData(); for (var i = 0; i < blobs.length; i++) formData.append("slice" + i, blobs[i], file.name + ".part" + i);
你应该没事。 不过,我还没有测试过它。
我对表现一无所知。 您也可以使用fr.readAsBinaryString
,从而使e.target.result
成为一个字符串。 这样,您可以使用简单的substring
/ slice
/ substr
/ whatever创建Blob
,但我担心Unicode字符和诸如此类的东西可能存在一些问题。 另外,也许它更慢。
将所有内容放在更连贯的代码段中:
$('#fileUpload').change(function() { // If no file is selected, there's nothing to do if (!this.files.length) return; var fr = new FileReader(), file = this.files[0]; fr.onload = function(e) { splitAndSendFile(new Uint8Array(e.target.result), file); }; fr.readAsArrayBuffer(file); }; function splitAndSendFile(dataArray, file) { var i = 0, formData, blob; for (; i < dataArray.length; i += 1e6) { blob = new Blob([dataArray.subarray(i, i + 1e6)]); formData = new FormData(); formData.append("fileUpload", blob, file.name + ".part" + (i / 1e6)); $.ajax({ url: 'script.php', type: 'POST', data: formData, processData: false, contentType: false, success: function(msg){ alert("Win: " + msg); }, error: function(bla, msg){ alert("Fail: " + msg); } }); } }
注意 : FormData.append
采用第三个可选参数,在File
或Blob
值的情况下,该参数应该是文件的名称。 如果未指定, Blob
可能会获得不可预测的随机文件名。
可能该参数不是标准的,并且在MDN artice中没有提及,但我在上面的代码片段中使用过它。 无论如何,如果你知道你在做什么,你可以有几个选项来指定文件名。 例如,使用formData.append("filename", file.name)
或在请求中发送自定义标头。