如何从对象URL获取文件或blob?
我允许用户通过拖放和其他方法加载图像到页面。 当图像被丢弃时,我使用URL.createObjectURL转换为对象URL来显示图像。 我不撤销url,因为我重复使用它。
所以,当创build一个FormData对象的时候,我可以允许他们上传一个带有其中一个图片的表单,是否有一些方法可以将这个对象URL反转回到一个Blob或者文件中,然后我可以追加它的FormData对象?
正如gengkev在他上面的评论中暗示的那样,看起来最好/唯一的方法就是使用asynchronousxhr2调用:
var xhr = new XMLHttpRequest(); xhr.open('GET', 'blob:http%3A//your.blob.url.here', true); xhr.responseType = 'blob'; xhr.onload = function(e) { if (this.status == 200) { var myBlob = this.response; // myBlob is now the blob that the object URL pointed to. } }; xhr.send();
请参阅从XHR请求获取BLOB数据,其中指出BlobBuilder在Chrome中不起作用,所以您需要使用:
xhr.responseType = 'arraybuffer';
如果您在canvas上显示文件,也可以将canvas内容转换为Blob对象。
canvas.toBlob(function(my_file){ //.toBlob is only implemented in > FF18 but there is a polyfill //for other browsers https://github.com/blueimp/JavaScript-Canvas-to-Blob var myBlob = (my_file); })
不幸的是@ BrianFreud的回答不符合我的需要,我有一点不同的需求,我知道这不是BrianFreud问题的答案,但是我离开这里是因为很多人都以同样的需求来到这里。 我需要像'如何从URL获取文件或blob?',目前的正确答案不符合我的需要,因为它不是跨域。
我有一个网站,从亚马逊S3 / Azure存储使用图像,在那里我存储与uniqueidentifiers命名的对象:
示例:http://www.************************************
其中一些图像应该从我们的系统界面下载。 为了避免通过我的HTTP服务器传递这个stream量,因为这个对象不需要访问任何安全性(除了域过滤),我决定直接请求用户的浏览器,并使用本地处理给文件一个真实的名称和延期。
为了做到这一点,我使用了亨利·阿尔格斯的这篇伟大的文章: http : //www.henryalgus.com/reading-binary-files-using-jquery-ajax/
1.第一步:添加二进制支持jQuery
/** * * jquery.binarytransport.js * * @description. jQuery ajax transport for making binary data type requests. * @version 1.0 * @author Henry Algus <henryalgus@gmail.com> * */ // use this transport for "binary" data type $.ajaxTransport("+binary", function (options, originalOptions, jqXHR) { // check for conditions and support for blob / arraybuffer response type if (window.FormData && ((options.dataType && (options.dataType == 'binary')) || (options.data && ((window.ArrayBuffer && options.data instanceof ArrayBuffer) || (window.Blob && options.data instanceof Blob))))) { return { // create new XMLHttpRequest send: function (headers, callback) { // setup all variables var xhr = new XMLHttpRequest(), url = options.url, type = options.type, async = options.async || true, // blob or arraybuffer. Default is blob dataType = options.responseType || "blob", data = options.data || null, username = options.username || null, password = options.password || null; xhr.addEventListener('load', function () { var data = {}; data[options.dataType] = xhr.response; // make callback and send data callback(xhr.status, xhr.statusText, data, xhr.getAllResponseHeaders()); }); xhr.open(type, url, async, username, password); // setup custom headers for (var i in headers) { xhr.setRequestHeader(i, headers[i]); } xhr.responseType = dataType; xhr.send(data); }, abort: function () { jqXHR.abort(); } }; } });
2.第二步:使用此传输types发出请求。
function downloadArt(url) { $.ajax(url, { dataType: "binary", processData: false }).done(function (data) { // just my logic to name/create files var filename = url.substr(url.lastIndexOf('/') + 1) + '.png'; var blob = new Blob([data], { type: 'image/png' }); saveAs(blob, filename); }); }
现在你可以使用你想要创build的Blob,在我的情况下,我想将它保存到磁盘。
3.可选:使用FileSaver将用户计算机上的文件保存
我已经使用FileSaver.js保存到磁盘下载的文件,如果你需要做到这一点,请使用此JavaScript库:
https://github.com/eligrey/FileSaver.js/
我希望这可以帮助其他有更多具体需求的人。