Split-Datei mit JavaScript oder jQuery

Brauche ich zum hochladen von einem Teil einer Datei (nur das erste MB). Ich habe ein PHP-script, das lädt die ganze Datei. Die Daten (formData- Objekt) übergeben wird durch einen ajax-Aufruf.

Meine Idee wäre nun teilen Sie die Datei mit javascript (jquery). Gibt es eine Lösung für meine Anfrage?

Aktuelle code:

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

Sie haben keinen Zugriff auf die Inhalt-Datei im JavaScript. Es gibt keinen Weg, um es zu teilen. Und BTW es gibt keinen Weg zur post eine Datei mit AJAX entweder.
Warum nicht Sie es post als Antwort?
Naja, eigentlich gibt ' s einen Weg - mit dem neuen FileReader-API. Aber irgendwie denke ich es ist hier nicht relevant. )
Ich nehme an diesem Artikel für Sie nützlich sein könnte. Beachten Sie jedoch, dass Werkzeuge verwendet werden, sind nicht universell unterstützt... noch.
ehm, das Skript oben funktioniert.

InformationsquelleAutor Sylnois | 2012-08-21

17

Da Sie mit FormData, das ist eine relativ neue Technologie, ich werde Ihnen zeigen, etwas mit neuen Technologien sowie.

Lesen Sie zuerst die Datei mit einem FileReader Objekt:
```
var fr = new FileReader(), buf, file = $('#fileUpload')[0].files[0];
fr.onload = function(e) {
    buf = new Uint8Array(e.target.result);
};
fr.readAsArrayBuffer(file);
```
Dann können Sie eine Blob für jeden geschlitzter Teil (1e6 bytes lang jeweils):
```
for (var i = 0, blobs = []; i < buf.length; i += 1e6)
    blobs.push(new Blob([buf.subarray(i, i + 1e6)]));
```
Schließlich können Sie fügen Sie alle Ihre Blobs auf Ihre FormData Objekt:
```
var formData = new FormData();
for (var i = 0; i < blobs.length; i++)
    formData.append("slice" + i, blobs[i], file.name + ".part" + i);
```
Sollten Sie ok sein. Ich habe es noch nicht getestet, aber.

Ich weiß nichts über die Leistung. Sie können fr.readAsBinaryString zu, damit e.target.result einen string. Auf diese Weise können Sie erstellen, die Blobs mit einem einfachen substring/slice/substr/was auch immer, aber ich fürchte, es könnte einige Probleme mit Unicode-Zeichen und so weiter. Plus, vielleicht ist es langsamer.

Setzen alles auf eine kohärentere snippet:
```
$('#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);
            }
        });
    }
}
```
Hinweis: FormData.append nimmt einen Dritten, optionalen parameter, mit dem sollte der name der Datei im Falle von File oder Blob Werte. Wenn nicht angegeben, wird Blobs bekommen kann unvorhersehbare zufällige Dateinamen.

Wahrscheinlich, dass die parameter nicht standard, und es ist nicht erwähnt in der MDN Artikel, aber ich habe es in dem snippet oben dennoch. Sowieso, wenn Sie wissen, was Sie tun, Sie können mehrere Optionen angeben, um die Datei name. Zum Beispiel, mit formData.append("filename", file.name) oder senden Sie eine benutzerdefinierte header in der Anforderung.
- Vielen Dank für Ihre Antwort. Ich will nicht senden Sie die ganze Palette, nur Teil für Teil(so kann ich die progressbar), aber irgendwie funktioniert es nicht(link zu meinem script am Ende). Mein PHP-Skript ist ein einfaches Kommando(move_uploaded_file($_FILES["fileUpload"]["tmp_name"], $uploadPath . $_FILES["fileUpload"]["name"]);). Ich möchte, passen die Teile zusammen serverside. 193.109.52.60/dario/f
- Es funktioniert nicht, weil ein syntax-Fehler in der blob.push(... Linie. Vergessene schließende Klammer, mein schlechtes. Sie können es erneut versuchen.
- funktioniert immer noch nicht :/ PS: Wirklich vielen Dank für Eure Hilfe! Dies versuche ich seit Wochen(nicht in Vollzeit natürlich :D)
- Ah, ich bekomme es. Das problem ist jetzt in Ihr - code. Ich nicht alles in einer vollständigen form, aber es nicht getan werden kann in einer synchronen Art und Weise. Ich gebe Ihnen einen Tipp, dass es in der Antwort.
- Etwas immer noch nicht richtig. Ich habe versucht zu Debuggen mein code mit Warnungen. Alarm 6 nicht appaer(nach diesem code-Abschnitt: blob = new Blob([dataArray.subarray(i, i + 1e6)]);
- Es funktioniert perfekt für mich, "bla6" ist alarmiert und dann bekomme ich eine "Gewinn" Warnung mit der Größe der gesendeten chunk. Ich bin mit Chrome 22 dev. Warum gehst du nicht Debuggen mit der developer-tools Ihres Browsers anstelle der altmodischen Warnungen? Welche verwenden Sie?
- ich kann sehen, Ihre Dateien(AEVLX.gif.part0 - Teil2). Ich bin mit Chrome 18.0.1025.162. Wenn ich versuche eine ZIP-Datei uploaden, nichts passiert. Nur die ersten vier, werden Warnungen angezeigt.
- ich aktualisierte mein google chrome 21 und jetzt funktioniert es.. aber was ist mit den Menschen, die mit älteren browser?
- große Dateien immer noch nicht funktioniert 🙁 browser stürzt nach dem hochladen möchten, um eine 25 MB große RAR-Datei
- Das ist wahrscheinlich, weil ein Speicher-überlauf, Art. Ich glaube nicht, dass Datei aufteilen, ist eine Aufgabe für Browser, wie dem auch sei: das ist das große problem. Leute mit älteren Browsern... naja, sollte das upgrade vor der Verwendung der app. Chrome, Firefox und Opera in der Regel upgrades automatisch. IE Frage in diesem Fall, so sollten Sie nicht Sorge über es. Es ist nicht eine Tragödie, Fragen Sie Ihren Benutzern ein upgrade auf die Browser mit eine gute HTML5-Unterstützung.
- Es ist, verursachen in vielen Unternehmen ist der ie(eine ältere version) Standard-und der Mitarbeiter kann nicht einfach ein upgrade der software, aber vielen DANK vier deine Hilfe, wirklich!!!! Eine Letzte Frage: ich habe dies partions, dass ich zeigen kann, bis eine progressbar. Wissen Sie, einen anderen Weg zu zeigen, bis eine progressbar mit JQuery? ohne flash oder sonstige extensions 🙂
- Also auch noch mit dem IE9 nicht unterstützen FormData noch XHR2-Anfragen, so sind Sie kein Glück mit diesem Haufen code. Wenn Ihr Ziel war es zu zeigen, ein Fortschrittsbalken, dann könnten Sie nur verlassen sich auf die onprogress Veranstaltung der upload Mitglied des XHR-Objekt, bekommen ein viel besseres Ergebnis als alle die Schmerzen haben wir durch. Als für den Fortschritt-bar, würde ich vorschlagen, verwenden einige gemeinsame jQuery-plugins, zum Beispiel die Statusanzeige von jQuery UI, die wie in einer "offiziellen" widget-Bibliothek jQuery. (BTW, können Sie akzeptieren Sie meine Antwort, wenn es dir geholfen?)
- was ist FormData-und FileReader-Klasse?
- Sie sind API, die Teil der XHR2-standard-Schnittstelle. Sie sind erhältlich in IE10+ und evergreen-Browser.
- Danke, dein code als Basis, das gleiche zu tun mit angular js. github.com/kurtzace/angular-multipart-smaller-chunks
InformationsquelleAutor MaxArt

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.