jQuery의 ajax 메서드를 사용하여 이미지를 blob으로 검색
최근에 또 다른 (관련) 질문을 했는데, 이에 따라 다음과 같은 질문이 나옵니다. 입력 양식에 대한 파일 대신 데이터 제출
jQuery.jax() 설명서(http://api.jquery.com/jQuery.ajax/), 를 읽어보면 승인된 dataType 목록에 이미지가 포함되어 있지 않은 것 같습니다.
jQuery.get(또는 jQuery.ajax)을 사용하여 이미지를 검색하고 이 이미지를 Blob에 저장한 후 POST 요청으로 다른 서버에 업로드하려고 합니다.현재 데이터 유형의 불일치로 인해 이미지가 손상된 것 같습니다(바이트의 크기 불일치 등).
이를 수행하는 코드는 다음과 같습니다(커피 스크립트에 있지만 구문 분석이 어렵지 않아야 함).
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)
대신 이 이미지를 블롭으로 검색하려면 어떻게 해야 합니까?
jQuery ajax에서는 할 수 없지만 native 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를 사용하여 응답을 설정합니다.유형
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%>
jQuery를 사용하여 오류 메시지를 처리해야 하는 경우.AJAX는 당신이 그 기능을 수정해야 할 것입니다.responseType
오류가 발생할 때 수정되지 않습니다.
그래서 당신은 수정해야 할 것입니다.responseType
성공적인 통화일 경우에만 "블로브"하기
$.ajax({
...
xhr: function() {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState == 2) {
if (xhr.status == 200) {
xhr.responseType = "blob";
} else {
xhr.responseType = "text";
}
}
};
return xhr;
},
...
error: function(xhr, textStatus, errorThrown) {
// Here you are able now to access to the property "responseText"
// as you have the type set to "text" instead of "blob".
console.error(xhr.responseText);
},
success: function(data) {
console.log(data); // Here is "blob" type
}
});
메모
디버그를 한 후 바로 해당 지점에 중단점을 두는 경우xhr.responseType
"블로브"하기 위해 당신이 가치를 얻으려고 한다면 당신은 주목할 수 있습니다.responseText
다음 메시지가 나타납니다.
값은 개체의 '응답'인 경우에만 액세스할 수 있습니다.유형'은 '' 또는 'text'입니다('blob'이었습니다).
@Musa님께 큰 감사를 드립니다. 여기 데이터를 base64 문자열로 변환하는 깔끔한 기능이 있습니다.이것은 이진 파일을 얻는 WebView에서 이진 파일(pdf, png, jpeg, docx, ...)을 처리할 때 편리할 수 있지만 파일의 데이터를 앱으로 안전하게 전송해야 합니다.
// runs a get/post on url with post variables, where:
// url ... your url
// post ... {'key1':'value1', 'key2':'value2', ...}
// set to null if you need a GET instead of POST req
// done ... function(t) called when request returns
function getFile(url, post, done)
{
var postEnc, method;
if (post == null)
{
postEnc = '';
method = 'GET';
}
else
{
method = 'POST';
postEnc = new FormData();
for(var i in post)
postEnc.append(i, post[i]);
}
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200)
{
var res = this.response;
var reader = new window.FileReader();
reader.readAsDataURL(res);
reader.onloadend = function() { done(reader.result.split('base64,')[1]); }
}
}
xhr.open(method, url);
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xhr.send('fname=Henry&lname=Ford');
xhr.responseType = 'blob';
xhr.send(postEnc);
}
언급URL : https://stackoverflow.com/questions/17657184/using-jquerys-ajax-method-to-retrieve-images-as-a-blob
'programing' 카테고리의 다른 글
동일한 Jenkins 작업 공간에서 여러 git 저장소 체크아웃 (0) | 2023.09.06 |
---|---|
:remote => 형식으로 파일 업로더를 사용하면 작동하지 않습니다. (0) | 2023.09.06 |
JavaScript + MariaDB: json 개체 배열을 반환하고 응답에서 '\' 포워드 슬래시를 제거하는 SQL 쿼리 (0) | 2023.09.06 |
OAuth2Rest Template 사용법? (0) | 2023.09.06 |
난수 행렬을 만드는 간단한 방법 (0) | 2023.09.06 |