Wie kann man einem als FormData hochgeladenen Blob einen Dateinamen geben?

Ich lade derzeit Bilder hoch, die mit dem folgenden Code aus der Zwischenablage eingefügt wurden:

// Turns out getAsFile will return a blob, not a file
var blob = event.clipboardData.items[0].getAsFile(), 
    form = new FormData(),
    request = new XMLHttpRequest();
form.append("blob",blob);
request.open(
            "POST",
            "/upload",
            true
        );
request.send(form);

Es stellt sich heraus, dass das hochgeladene Formularfeld einen ähnlichen Namen erhält: Blob157fce71535b4f93ba92ac6053d81e3a

Gibt es eine Möglichkeit, diesen Dateinamen clientseitig festzulegen oder zu empfangen, ohne serverseitige Kommunikation durchzuführen?

Verwenden Sie für Chrome, Safari und Firefox einfach Folgendes:

form.append("blob", blob, filename);

(siehe MDN-Dokumentation )

Fügen Sie dies hier hinzu, da es nicht hier zu sein scheint.

Neben der hervorragenden Lösung von können form.append("blob",blob, filename);Sie den Blob auch in eine FileInstanz verwandeln :

var blob = new Blob([JSON.stringify([0,1,2])], {type : 'application/json'});
var fileOfBlob = new File([blob], 'aFileName.json');
form.append("upload", fileOfBlob);

Da die Daten in die Zwischenablage eingefügt werden, gibt es keine zuverlässige Methode, um den Ursprung der Datei und ihre Eigenschaften (einschließlich des Namens) zu ermitteln.

Am besten erstellen Sie ein eigenes Dateinamenschema und senden es zusammen mit dem Blob.

form.append("filename",getFileName());
form.append("blob",blob);

function getFileName() {
 // logic to generate file names
}

Dieser Name scheint von einer Objekt-URL-GUID abgeleitet zu sein. Gehen Sie wie folgt vor, um die Objekt-URL abzurufen, von der der Name abgeleitet wurde.

var URL = self.URL || self.webkitURL || self;
var object_url = URL.createObjectURL(blob);
URL.revokeObjectURL(object_url);

object_urlwird wie blob:{origin}{GUID}in Google Chrome und moz-filedata:{GUID}in Firefox formatiert . Ein Ursprung ist das Protokoll + Host + Nicht-Standard-Port für das Protokoll. Zum Beispiel blob:http://stackoverflow.com/e7bc644d-d174-4d5e-b85d-beeb89c17743oder blob:http://[::1]:123/15111656-e46c-411d-a697-a09d23ec9a99. Sie möchten wahrscheinlich die GUID extrahieren und alle Striche entfernen.

Ich habe es nicht getestet, aber das sollte die URL der Blobs-Daten alarmieren:

var blob = event.clipboardData.items[0].getAsFile(), 
    form = new FormData(),
    request = new XMLHttpRequest();

var reader = new FileReader();
reader.onload = function(event) {
  alert(event.target.result); // <-- data url
};
reader.readAsDataURL(blob);

Es hängt wirklich davon ab, wie der Server auf der anderen Seite konfiguriert ist und mit welchen Modulen er einen Blob-Beitrag behandelt. Sie können versuchen, den gewünschten Namen in den Pfad für Ihren Beitrag einzufügen.

request.open(
    "POST",
    "/upload/myname.bmp",
    true
);

Verwenden Sie Google App Engine? Sie können Cookies (mit JavaScript erstellt) verwenden, um eine Beziehung zwischen Dateinamen und dem vom Server empfangenen Namen aufrechtzuerhalten.

Wenn Sie Google Chrome verwenden, können Sie das hierfür verwenden / missbrauchen Google Filesystem API. Hier können Sie eine Datei mit einem bestimmten Namen erstellen und den Inhalt eines Blobs darauf schreiben. Anschließend können Sie das Ergebnis an den Benutzer zurückgeben.

Ich habe noch keinen guten Weg für Firefox gefunden. Wahrscheinlich ist ein kleines Stück Flash downloadifyerforderlich, um einen Blob zu benennen.

IE10 hat eine msSaveBlob()Funktion in der BlobBuilder.

Vielleicht ist dies mehr zum Herunterladen eines Blobs, aber es ist verwandt.