DOM에서 img 가져 오기 및 아약스를 통해 업로드

Question

어떻게 DOM에서 이미지를 가져 와서 아약스를 통해 업로드 할 수 있습니까?

my_img_ele = document.getElementById("my_img"); 

이

는 AJAX 호출을입니다

var xmlHttp=new XMLHttpRequest(); 
    xmlHttp.open("POST", "site", true); 
    var formData = new FormData(); 
    formData.append(IMG_HERE); 
    xmlHttp.send(formData); 

내가 그냥 URL을 전송 한 다음 이미지 서버 측면을 찾고하고있다. 그러나 나는 이것이 더 빠를 것이라고 생각한다.

편집 : 사용자가 양식을 통해 이미지를 업로드하지 않습니다. 그것은 img 요소입니다.

Answer 1

숫자가 분명히 잘못되었습니다. 여기 이미지 요소는 이미지의 URL을 포함하는 DOM 노드 이외의 것입니다. 이미지 자체는 브라우저에 의해 다운로드되므로 클라이언트 컴퓨터에서는 브라우저 메모리에서만 사용할 수 있습니다. 그리고 심지어 어떻게 든 당신은 브라우저 메모리 (캐시)에 대한 접근을 얻습니다. 클라이언트 연결을 기반으로 거기에서 업로드하는 것이 원본 소스에서 서버 쪽을 다운로드하는 것보다 느릴 가능성이 높습니다. 다른 해결책은 ajax를 통해 URL (img.src)을 기반으로 이미지를 다운로드하는 것은 첫 번째 콜백에서 다른 아약스로 간단히 우회하는 것입니다. 물론 이미지가 평균적으로 2 배 더 많이 이동한다는 것을 의미합니다.

Answer 2

당신이 인터넷에서 간단하고 쉽게 검색 할 수있는 FormData 답을 사용하여, "AJAX를 통해 업로드 이미지"를 묻는다면.

this link이 귀하의 질문에 대답하는지 확인하십시오.

DOM에서 이미지를 얻으려면 위와 같은 방법을 사용합니다. 하지만 양식을 제출하는 대신 DOM img 요소를 dataURI으로 읽어야합니다.

확인 다음 코드의 HTML에 대한 FIDDLE :도 지원되지 않습니다

var originalImage = document.getElementById("image"), 
    canvas = document.getElementById('canvas'), 
    context = canvas.getContext('2d'), 
    formdata = false, 
    dummy = document.getElementById('dummy'), 
    newImage = new Image(); 

if (window.FormData) { 
    formdata = new FormData(); 
} 

newImage.onload = function(){ 
    // width and height here should be the same as original image 
    // detect before-hand, using jQuery(el).width() /.height() on the DOM element 
    context.drawImage(newImage, 0, 0, 400, 300); 
} 

newImage.src = originalImage.src; 

    // traditional ajax and jQuery, no HTML5 
if (formdata) { 
    var canvasToDURI = canvas.toDataURL(); 
    formdata.append("image-data", canvasToDURI); 

    // yay!, jQuery 
    $.ajax({ 
     url: "upload.php", 
     type: "POST", 
     data: formdata, 
     processData: false, 
     contentType: false, 
     success: function (res) { 
     // do some thing ! 
     dummy.innerText = 'Image data sent !'; 
     }, 
     error: function(a, b, c) { 
     dummy.innerText = 'The following data was not sent due to : ' + b + ' -- '+ c + ' \n\n' + canvasToDURI; 
     } 
    }); 
} 

FormData 경우, 폼 element을 만들고 "multipart/form-data"에 form의 enctype을 변경하고에서 자바 스크립트를 사용하여 데이터를 전송할 수 있습니다 양식을 제출하지 않고 AJAX에 전화하십시오.