So erhalten Sie den Dateinamen von der Inhaltsdisposition

Question 1

Ich habe eine Datei als Antwort von Ajax heruntergeladen. So erhalten Sie den Dateinamen und den Dateityp von content-disposition und zeigen Sie ein Miniaturbild dafür an. Ich habe viele Suchergebnisse erhalten, konnte aber nicht den richtigen Weg finden.

$(".download_btn").click(function () {
  var uiid = $(this).data("id2");

  $.ajax({
    url: "http://localhost:8080/prj/" + data + "/" + uiid + "/getfile",
    type: "GET",
    error: function (jqXHR, textStatus, errorThrown) {
      console.log(textStatus, errorThrown);
    },
    success: function (response, status, xhr) {
      var header = xhr.getResponseHeader('Content-Disposition');
      console.log(header);     
    }
});

Konsolenausgabe:

inline; filename=demo3.png

Question 2

Hier ist, wie ich es irgendwann verwendet habe. Ich gehe davon aus, dass Sie den Anhang als Serverantwort bereitstellen.

Ich setze den Response-Header so von meinem REST-Service response.setHeader("Content-Disposition", "attachment;filename=XYZ.csv");

function(response, status, xhr){
    var filename = "";
    var disposition = xhr.getResponseHeader('Content-Disposition');
    if (disposition && disposition.indexOf('attachment') !== -1) {
        var filenameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/;
        var matches = filenameRegex.exec(disposition);
        if (matches != null && matches[1]) { 
          filename = matches[1].replace(/['"]/g, '');
        }
    }
}

BEARBEITEN: Bearbeiten Sie die Antwort entsprechend Ihrer Frage – Verwendung des Wortes inline Anstatt von attachment

function(response, status, xhr){
    var filename = "";
    var disposition = xhr.getResponseHeader('Content-Disposition');
    if (disposition && disposition.indexOf('inline') !== -1) {
        var filenameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/;
        var matches = filenameRegex.exec(disposition);
        if (matches != null && matches[1]) { 
          filename = matches[1].replace(/['"]/g, '');
        }
    }
}

Mehr hier

Question 3

Dies ist eine Verbesserung der Antwort von marjon4.

Ein stark vereinfachter Weg zur ausgewählten Antwort wäre die Verwendung von split wie folgt;

var fileName = xhr.getResponseHeader('content-disposition').split('filename=")[1].split(";')[0];

Hinweis: Diese Lösung funktioniert möglicherweise nicht wie erwartet, wenn Ihr Dateiname selbst ein Semikolon (;)

Question 4

Oder einfach nur:

var fileName = xhr.getResponseHeader('Content-Disposition').split("filename=")[1];

Question 5

Bei mir sieht der Header so aus:

attachment; filename="test-file3.txt"

Daher konnte ich den Dateinamen ziemlich einfach mit einer benannten Gruppenregexp extrahieren:

const regExpFilename = /filename="(?<filename>.*)"/;

const filename: string | null = regExpFilename.exec(contentDispositionHeader)?.groups?.filename ?? null;

Ich weiß, dass ich hier etwas vom Thema abweiche, da OP keine Anführungszeichen um den Dateinamen hat, aber immer noch teilt, falls jemand auf das gleiche Muster stößt wie ich gerade

Question 6

Wenn Sie den Dateinamen erhalten und sowohl diese seltsamen URL-codierten UTF-8-Header als auch die ASCII-Header unterstützen möchten, können Sie so etwas verwenden

public getFileName(disposition: string): string {
    const utf8FilenameRegex = /filename\*=UTF-8''([\w%\-\.]+)(?:; ?|$)/i;
    const asciiFilenameRegex = /^filename=(["']?)(.*?[^\\])\1(?:; ?|$)/i;

    let fileName: string = null;
    if (utf8FilenameRegex.test(disposition)) {
      fileName = decodeURIComponent(utf8FilenameRegex.exec(disposition)[1]);
    } else {
      // prevent ReDos attacks by anchoring the ascii regex to string start and
      //  slicing off everything before 'filename="
      const filenameStart = disposition.toLowerCase().indexOf("filename=");
      if (filenameStart >= 0) {
        const partialDisposition = disposition.slice(filenameStart);
        const matches = asciiFilenameRegex.exec(partialDisposition );
        if (matches != null && matches[2]) {
          fileName = matches[2];
        }
      }
    }
    return fileName;
}

Ein paar Anmerkungen:

Dadurch wird der Wert des UTF-8-Dateinamens, falls festgelegt, über den ASCII-Namen übernommen
Beim Herunterladen kann Ihr Browser den Namen weiter ändern, um bestimmte Zeichen zu ersetzen, wie z "mit _ (Chrom)

Das ASCII-Muster funktioniert am besten für Dateinamen in Anführungszeichen, unterstützt jedoch Werte ohne Anführungszeichen. In diesem Fall wird der gesamte Text nach dem behandelt filename= und vor dem entweder dem nächsten ; oder das Ende des Header-Werts als Dateiname.
Pfadinformationen werden dadurch nicht bereinigt. Wenn Sie die Datei von einer Website speichern, ist dies die Aufgabe des Browsers, aber wenn Sie dies im Kontext einer Node-App oder ähnlichem verwenden, stellen Sie sicher, dass Sie die Pfadinformationen pro Betriebssystem bereinigen und nur den Dateinamen belassen. oder ein präparierter Dateiname könnte verwendet werden, um eine Systemdatei zu überschreiben (denken Sie an einen Dateinamen wie ../../../../../../../path/to/system/files/malicious.dll)

MDN-Content-Disposition-Header

Question 7

Versuchen Sie diese Lösung:

var contentDisposition = xhr.getResponseHeader('Content-Disposition');
var startIndex = contentDisposition.indexOf("filename=") + 10; // Adjust '+ 10' if filename is not the right one.
var endIndex = contentDisposition.length - 1; //Check if '- 1' is necessary
var filename = contentDisposition.substring(startIndex, endIndex);
console.log("filename: " + filename)

Question 8

Es gibt ein npm-Paket, das die Arbeit erledigt: Inhaltsdisposition