JavaScript:如何通过AJAX打开返回的文件

时间:2022-08-25 18:13:36

This is similar to: How to open a file using JavaScript?

这类似于:如何使用JavaScript打开文件?

Goal: to retrieve/open a file on an image's double click

function getFile(filename){
   // setting mime this way is for example only
   var mime = 'application/vnd.openxmlformats-officedocument.wordprocessingml.document';

   jQuery.ajax({ url      : 'get_file.pl',
                 data     : {filename:filename}, 
                 success  : function(data){
                               var win = window.open('','title');
                               win.document.open(mime);
                               win.document.write(data);
                               win.document.close();
                            }
               });
}

jQuery('#imgID').dblclick(function(){ 
   getFile('someFile.docx');
});

I'm doing this off the top of my head, but I think the above would work for text files, but not binary. Is there a plugin that does this properly? The ideal would be to open the file in the browser (or application), rather than download, but I doubt that is a dream. If the file must be downloaded with the save/open dialog, that's fine.

我正在做这件事,但我认为上面的内容适用于文本文件,但不适用于二进制文件。是否有适当的插件?理想的是在浏览器(或应用程序)中打开文件,而不是下载,但我怀疑这是一个梦想。如果必须使用保存/打开对话框下载文件,那很好。


Edit:

One piece of information that I forgot to mention is that I'd like this to be a POST request. This is partly why I was looking at AJAX to begin with. I've seen workarounds that have created forms/iframes to do something similar, but I was looking for a better handler of the returned info.

我忘了提到的一条信息是,我希望这是一个POST请求。这就是我开始研究AJAX的部分原因。我已经看到了创建表单/ iframe来做类似事情的变通办法,但我一直在寻找一个更好的返回信息处理程序。

1 个解决方案

#1


5  

Seems to me there's no reason to do this via AJAX. Just open the new window to get_file.pl?filename=... and let the browser handle it. If the user has a plugin capable of handling the Content-Type sent by get_file.pl, the file will display; otherwise, it should download like any other file.

在我看来没有理由通过AJAX这样做。只需打开get_file.pl?filename = ...的新窗口,然后让浏览器处理它。如果用户有一个能够处理get_file.pl发送的Content-Type的插件,则会显示该文件;否则,它应该像任何其他文件一样下载。

function getFile(filename) {
   window.open('get_file.pl?filename=' + filename,'title');
}

jQuery('#imgID').dblclick(function() { 
   getFile('someFile.docx');
});

Edit: If you want to POST to your script, you can do it with some <form> hackery:

编辑:如果你想POST到你的脚本,你可以使用一些

hackery:

function getFile(filename) {
    var win = 'w' + Math.floor(Math.random() * 10000000000000);
    window.open('', win,'width=250,height=100');
    var f = $('<form></form>')
            .attr({target: win, method:'post', action: 'get_file.pl'})
            .appendTo(document.body);

    var i = $('<input>')
            .attr({type:'hidden',name:'filename',value:filename})
            .appendTo(f);

    f[0].submit();
    f.remove();
}

Of course, this is somewhat silly since it is impossible to hide your data from "prying eyes" with developer tools. If your filename really is sensitive, issue access tokens to the client, and look up the data in your sever script.

当然,这有些愚蠢,因为用开发者工具隐藏你的数据不会“窥探”。如果您的文件名确实是敏感的,请向客户端发出访问令牌,并在服务器脚本中查找数据。

#1


5  

Seems to me there's no reason to do this via AJAX. Just open the new window to get_file.pl?filename=... and let the browser handle it. If the user has a plugin capable of handling the Content-Type sent by get_file.pl, the file will display; otherwise, it should download like any other file.

在我看来没有理由通过AJAX这样做。只需打开get_file.pl?filename = ...的新窗口,然后让浏览器处理它。如果用户有一个能够处理get_file.pl发送的Content-Type的插件,则会显示该文件;否则,它应该像任何其他文件一样下载。

function getFile(filename) {
   window.open('get_file.pl?filename=' + filename,'title');
}

jQuery('#imgID').dblclick(function() { 
   getFile('someFile.docx');
});

Edit: If you want to POST to your script, you can do it with some <form> hackery:

编辑:如果你想POST到你的脚本,你可以使用一些

hackery:

function getFile(filename) {
    var win = 'w' + Math.floor(Math.random() * 10000000000000);
    window.open('', win,'width=250,height=100');
    var f = $('<form></form>')
            .attr({target: win, method:'post', action: 'get_file.pl'})
            .appendTo(document.body);

    var i = $('<input>')
            .attr({type:'hidden',name:'filename',value:filename})
            .appendTo(f);

    f[0].submit();
    f.remove();
}

Of course, this is somewhat silly since it is impossible to hide your data from "prying eyes" with developer tools. If your filename really is sensitive, issue access tokens to the client, and look up the data in your sever script.

当然,这有些愚蠢,因为用开发者工具隐藏你的数据不会“窥探”。如果您的文件名确实是敏感的,请向客户端发出访问令牌,并在服务器脚本中查找数据。