How to get file name from content-disposition

问题

I Downloaded file as response of ajax. How to get file name and file type from content-disposition and display thumbnail for it. i got many search results but couldn't find right way.

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

回答1:

Here is how I used it sometime back. I'm assuming you are providing the attachment as a server response.

I set the response header like this from my 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, '');
        }
    }
}

EDIT: Editing the answer to suit your question- use of the word inline instead of 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, '');
        }
    }
}

More here

回答2:

Try this solution:

var header = xhr.getResponseHeader('Content-Disposition');
var startIndex = header.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)

回答3:

There is an npm package that does the job: content-disposition

回答4:

Didn't find any response on stackoverflow in my case. I receive a content-disposition like that: inline; filename*=UTF-8''Dossier%20de%20diagnostic%20technique.pdf

I modified the regex to deal with an UTF-8 string if present : var regex = /filename[^;=\n]=(UTF-8(['"]))?(.*)/;

And here is my function :

function getFileNameByContentDisposition(contentDisposition){
    var regex = /filename[^;=\n]*=(UTF-8(['"]*))?(.*)/;
    var matches = regex.exec(contentDisposition);
    var filename;

    if (matches != null && matches[3]) { 
      filename = matches[3].replace(/['"]/g, '');
    }

    return decodeURI(filename);
}

EDIT : I didn't test it that much. Don't forget to wrap it with a try / catch in a NodeJS code.

来源：https://stackoverflow.com/questions/40939380/how-to-get-file-name-from-content-disposition

标签

javascript

ajax

filenames

file-type

content-disposition