我最近问了另一个(相关的)问题,这导致了后续问题:
通读jQuery.ajax()文档(http://api.jquery.com/jQuery.ajax/),似乎可接受的dataTypes列表不包含图像。
我正在尝试使用jQuery.get(如果需要的话,也可以使用jQuery.ajax)来检索图像,将此图像存储在Blob中,然后在POST请求中将其上传到另一台服务器。当前,由于数据类型不匹配,我的图像最终被损坏(字节大小不匹配等)。
执行此操作的代码如下(它在coffeescript中,但应该不难解析):
handler = (data,status) -> fd = new FormData fd.append("file", new Blob([data], { "type" : "image/png" })) jQuery.ajax { url: target_url, data: fd, processData: false, contentType: "multipart/form-data", type: "POST", complete: (xhr,status) -> console.log xhr.status console.log xhr.statusCode console.log xhr.responseText } jQuery.get(image_source_url, null, handler)
我如何检索此图像作为blob?
您不能使用jQuery ajax来执行此操作,而是使用本机XMLHttpRequest来执行此操作。
var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function(){ if (this.readyState == 4 && this.status == 200){ //this.response is what you're looking for handler(this.response); console.log(this.response, typeof this.response); var img = document.getElementById('img'); var url = window.URL || window.webkitURL; img.src = url.createObjectURL(this.response); } } xhr.open('GET', 'http://jsfiddle.net/img/logo.png'); xhr.responseType = 'blob'; xhr.send();
编辑
因此,回顾这个主题,似乎确实有可能使用jQuery 3做到这一点。
jQuery.ajax({ url:'https://images.unsplash.com/photo-1465101108990-e5eac17cf76d?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ%3D%3D&s=471ae675a6140db97fea32b55781479e', cache:false, xhr:function(){// Seems like the only way to get access to the xhr object var xhr = new XMLHttpRequest(); xhr.responseType= 'blob' return xhr; }, success: function(data){ var img = document.getElementById('img'); var url = window.URL || window.webkitURL; img.src = url.createObjectURL(data); }, error:function(){ } }); <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script> <img id="img" width=100%>
要么
使用xhrFields设置responseType
jQuery.ajax({ url:'https://images.unsplash.com/photo-1465101108990-e5eac17cf76d?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ%3D%3D&s=471ae675a6140db97fea32b55781479e', cache:false, xhrFields:{ responseType: 'blob' }, success: function(data){ var img = document.getElementById('img'); var url = window.URL || window.webkitURL; img.src = url.createObjectURL(data); }, error:function(){ } }); <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script> <img id="img" width=100%>