Разделить файл с помощью JavaScript или jQuery

Мне нужно загрузить часть файла (только первый MB). Я создал PHP script, который загружает весь файл. Данные (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);
 }
 });
}
1 ответ

Поскольку вы используете FormData, что является довольно новой технологией, я также покажу вам что-то с новыми технологиями.

Сначала прочитайте файл с объектом FileReader:

var fr = new FileReader(), buf, file = $('#fileUpload')[0].files[0];
fr.onload = function(e) {
 buf = new **********(e.target.result);
};
fr.readAsArrayBuffer(file);

Затем вы можете создать Blob для каждой разделенной части (1** байтов каждый):

for (var i = 0, blobs = []; i < buf.length; i += 1**)
 blobs.push(new Blob([buf.subarray(i, i + 1**)]));

Наконец, вы можете добавить все свои 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 строку. Таким образом, вы можете создать Blob, используя простой substring/slice/substr/все, но я боюсь, что могут быть некоторые проблемы с символами Unicode и еще что-то. Плюс, возможно, это медленнее.

Поместите все в более последовательный фрагмент:

$('#fileUpload').change(function() {
 // If no file is selected, there nothing to do
 if (!this.files.length) return;
 var fr = new FileReader(), file = this.files[0];
 fr.onload = function(e) {
 splitAndSendFile(new **********(e.target.result), file);
 };
 fr.readAsArrayBuffer(file);
};
function splitAndSendFile(dataArray, file) {
 var i = 0, formData, blob;
 for (; i < dataArray.length; i += 1**) {
 blob = new Blob([dataArray.subarray(i, i + 1**)]);
 formData = new FormData();
 formData.append("fileUpload", blob, file.name + ".part" + (i / 1**));
 $.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, но я использовал его в фрагменте выше, тем не менее. В любом случае, если вы знаете, что делаете, у вас может быть несколько опций для указания имени файла. Например, с помощью formData.append("filename", file.name) или отправки пользовательского заголовка в запросе.

licensed under cc by-sa 3.0 with attribution.