How to get file name from content-disposition

我下载了一个文件作为 Ajax 的回应。如何从 content-disposition获取文件名和文件类型并显示其缩略图。我得到了许多搜索结果，但找不到正确的方式。

$(".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);
}
});

Console output:

inline; filename=demo3.png
146238 次浏览
小开
最佳答案

我以前是这么用的。 我假设您提供附件作为服务器响应。

我在 REST 服务 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, '');
}
}
}

编辑: 编辑答案，以适应您的问题-使用单词 inline而不是 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, '');
}
}
}

这里还有

小开

试试这个办法:

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)
小开

有一个 npm 包执行这项工作: 内容-处置

小开

或者简单地说:

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

这是 Marjon4答案的改进。

选择答案的一个更简单的方法是像这样使用分割;

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

注意: 如果文件名本身包含分号(;) ，则此解决方案可能无法正常工作

小开

In my case the header looks like this:

attachment; filename="test-file3.txt"

因此，我能够很容易地用一个命名的组 regexp 提取文件名:

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


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

我知道我有点偏离主题，因为 OP 在文件名周围没有引号，但是仍然分享，以防有人碰到与我刚才相同的模式

小开

如果你是 不能和多部分身体一起工作，那么你可以使用这个函数。它从 Content-Disposition 头值(字符串如: 文件名 = demo3.png)中提取文件名，并根据需要进行解码。

const getFileNameFromContentDisposition = disposition => {
if (disposition
&& (disposition.startsWith('attachment') || disposition.startsWith('inline'))
) {
let filename = disposition.startsWith('attachment')
? disposition.replace("attachment;", "")
: disposition.replace("inline;", ""); //replaces first match only
filename = filename.trim();
if (filename.includes("filename*=") && filename.includes("filename=")) {
let filenames = filename.split(";"); //we can parse by ";" because all ";"s inside filename are escaped
if (filenames.length > 1) { //"filename=" or "filename*=" not inside filename
if (filenames[0].trim().startsWith("filename*=")) { //"filename*=" is preferred
filename = filenames[0].trim();
} else {
filename = filenames[1].trim();
}
}
}
if (filename.startsWith("filename*=")) {
filename = filename.replace("filename*=", "")
.split("''").slice(1).join("''"); //remove encoding and ''
filename = decodeURIComponent(filename);
} else if (filename.startsWith("filename=")) {
filename = filename.replace("filename=", "")
if (filename.startsWith('"') && filename.endsWith('"')) {
filename = filename.slice(1, filename.length - 1); //remove quotes
}
}
return filename;
}
}

The result of the function can be split into name and extension as follows:

let name = getFileNameFromContentDisposition("inline; filename=demo.3.png").split(".");
let extension = name[name.length - 1];
name = name.slice(0, name.length - 1).join(".");
console.log(name); // demo.3
console.log(extension); //png

例如，可以使用 svg 显示缩略图:

let colors = {"png": "red", "jpg": "orange"};
//this is a simple example, you can make something more beautiful
let createSVGThumbnail = extension => `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="20" viewBox="0 0 18 20">
<rect x="0" y="0" width="18" height="20" fill = "#FAFEFF"/>
<rect x="0" y="7" width="18" height="6" stroke="${colors[extension] || "blue"}" fill = "${colors[extension] || "blue"}"/>
<text stroke = "white" fill = "white" font-size = "6" x = "0" y = "12.5" textLength = "18">${extension.toUpperCase()}</text>
</svg>`;


...


//You can use it as HTML element background-image
let background = "data:image/svg+xml;base64," + btoa(new TextDecoder().decode(createSVGThumbnail("png")));
小开

如果您希望获得文件名并同时支持那些奇怪的 url 编码的 UTF-8头文件和 ascii 头文件，那么可以使用下面的代码

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

一些注意事项:

  1. 如果设置了 UTF-8文件名，它的值将取代 ascii 名称
  2. 在下载时，浏览器可能会进一步更改名称，将某些字符(如 ")替换为 _(Chrome)
  3. Ascii 模式最适用于带引号的文件名，但是支持无引号的值。在这种情况下，它将 filename=之后以及下一个 ;或头值结束之前的所有文本视为文件名。
  4. 这不会清理路径信息。如果你从网站上保存文件，那是浏览器的工作，但是如果你在节点应用程序或类似的情况下使用它，一定要清理每个操作系统的路径信息，只留下文件名，或者一个精心设计的文件名可能被用来覆盖系统文件(想想像 ../../../../../../../path/to/system/files/malicious.dll这样的文件名)

内容处理头

小开

下面还考虑了这样的情况: filename包含 Unicode 字符(例如，-, !, (, )等等) ，因此(utf-8编码)以 filename*=utf-8''Na%C3%AFve%20file.txt的形式出现(更多细节参见 给你)。在这种情况下，使用 decodeURIComponent()函数对 filename进行解码。

const disposition = xhr.getResponseHeader('Content-Disposition');
filename = disposition.split(/;(.+)/)[1].split(/=(.+)/)[1]
if (filename.toLowerCase().startsWith("utf-8''"))
filename = decodeURIComponent(filename.replace("utf-8''", ''))
else
filename = filename.replace(/['"]/g, '')

If you are doing a 交叉起源 request, make sure to add Access-Control-Expose-Headers: Content-Disposition to the response headers on server side (see Access-Control-Expose-Headers), in order to expose the Content-Disposition header; otherwise, the filename won't be accessible on client side through JavaScript. For instance:

headers = {'Access-Control-Expose-Headers': 'Content-Disposition'}
return FileResponse("Naïve file.txt", filename="Naïve file.txt", headers=headers)
小开

我相信这会有帮助的！

let filename = response.headers['content-disposition'].split('filename=')[1].split('.')[0];
let extension = response.headers['content-disposition'].split('.')[1].split(';')[0];
小开

There's also library 内容-处置-附件, which can be used in the browser:

npm i -D content-disposition-attachment

import { AxiosResponse } from "axios";
import { parse } from "content-disposition-attachment";


const getFilenameFromHeaders = ({ headers }: AxiosResponse<Blob>) => {
const defaultName = "untitled";
try {
const { attachment, filename } = parse(headers["content-disposition"]);
return attachment ? filename : defaultName;
} catch (e) {
console.error(e);
return defaultName;
}
};

提交答案