jquery ajax로 잘린 이미지를 업로드하고 싶습니다. 따라서 캔버스 요소에서 blob을 만들어 양식 데이터에 추가합니다. 지금까지 잘 작동하지만 동기화 / 비동기 문제가 있습니다. 웹에서 자바 스크립트 콜백을 검색했지만 이것이 일반적으로 올바른지 확실하지 않습니다. 문제는
return formData;
blob이 양식 데이터에 추가되기 전에 실행됩니다. 내 문제를 해결할 수있는 쉬운 해결책이 있다고 생각하지만 해결할 수 없습니다. 도와 주실 수 있습니다.
$.ajax({
url: this.$upload.data('url'),
method: 'POST',
contentType: false,
processData: false,
cache: false,
data: (function(_this) {
var formData = new FormData();
_this.getCroppedImage().toBlob(
function(blob) {
formData.append('file', blob, _this.file.name);
},
_this.file.type
);
$.each(_this.$element.data(), function(key, value) {
formData.append(key, value);
});
return formData;
})(this)
});
아는 것이 중요 할 수도 있습니다. 또한 모든 브라우저에서 toBlob 메서드를 사용할 수 있도록 https://github.com/blueimp/JavaScript-Canvas-to-Blob 을 사용 합니다.
이를 수행하려면 promise 객체를 살펴보고 싶을 것입니다.이를 위한 좋은 라이브러리는 q.js입니다.
기본적으로 양식 데이터를 빌드 할 함수를 만든 다음 양식 데이터가 완료 될 때까지 기다립니다. 약속이 해결되면 "then"콜백을 통해 양식 데이터를 ajax 함수로 전달합니다. 그런 다음 ajax 호출이 실행됩니다.
function ajaxFn(){
//result is your formData in this case
getFormData().then(function(result){
//this won't run until the promise resolves, aka formData is complete
$.ajax({
url: this.$upload.data('url'),
method: 'POST',
contentType: false,
processData: false,
cache: false,
data: result
});
});
}
function getFormData(){
var deferred = Q.defer();
var formData = new FormData();
$.each(_this.$element.data(), function(key, value) {
formData.append(key, value);
});
_this.getCroppedImage().toBlob(
function(blob) {
formData.append('file', blob, _this.file.name);
//this is what will get passed into your then function above
deferred.resolve(formData);
},
_this.file.type
);
return deferred.promise;
}
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다