Ajax passing image 변수

Question

다음 Ajax 코드를 사용하여 변수를 전달했습니다. 그러나 이미지와 함께 작동하지 않는 것 같습니다. 어떤 제안?

<p> 
    <input type="file" name="image" /><br /> 
    <input type="button" value="Submit" onclick="addImage()" /> 
    </p> 
    <div id="content"> </div> 
    <script> 
    function addImage() { 
     var image = $('input[name=image]').val(); 
     $.ajax({ 
      type: "POST", 
      url: "/chat", 
      data: {'image': image}, 
      cache: false 
     }); 
    } 
    </script> 

Answer 1

정확하게 말하면 페이지에 데이터를 특별한 방식으로 전달해야합니다. 이 tutorial by Nettuts+을 확인하십시오. 유사한 문제가 발생했을 때 사용했습니다.

유일한 차이점은 한 번만 업로드 할 수 있고 많은 업로드를 허용한다는 것입니다. multiple 속성을 해제하여 문제를 해결할 수 있습니다.

또한, 자동 선택 후 이미지를 업로드, 그래서 당신은 이것을 시도 싶어 있습니다 대신의

document.getElementById('yourbuttonsid').onclick = function() { 
    var i = 0, len = this.files.length, img, reader, file; 
    document.getElementById("response").innerHTML = "Uploading . . ." 
    for (; i < len; i++) { 
     file = this.files[i]; 
     if (!!file.type.match(/image.*/)) { 
     } 
    } 
} 

: 나는 도움이

if (input.addEventListener) { 
    input.addEventListener("change", function (evt) { 
     var i = 0, len = this.files.length, img, reader, file; 
     document.getElementById("response").innerHTML = "Uploading . . ." 
     for (; i < len; i++) { 
      file = this.files[i]; 
      if (!!file.type.match(/image.*/)) { 
      } 
     } 
    }, false); 
} 

희망을. 필요한 경우 설정을 개인적인 필요에 맞게 조정하십시오.

Answer 2

JSON 개체는 문자열, 기본 개체, 정수 및 기타 몇 가지 사항을 전송하기 위해서만 만들어집니다. 그들은 이미지 전송을위한 것이 아닙니다. 그러나 여전히 자신 만의 방식으로이 기능을 구현하려는 경우 두 가지 방법으로 생각할 수 있습니다. 첫째, 이미지의 이름 (정확한 링크)을 보내거나 업로드하고 경로를 제공하십시오.

두 번째로 브라우저에서 base64로 변환하여 보내고 필요한 경우 코드를 다시 변환하십시오.

<form method="async" onsubmit="addImage(this.image)"> 
    <input type="file" name="image" /><br /> 
    <input type="submit" value="Submit" /> 
</form> 
<div id="content"></div> 
<script> 
function addImage(img) { 
    $.ajax({ 
     type: "POST", 
     url: "/chat", 
     data: {'image': toBase64(img)}, 
     cache: false 
    }); 
} 
function toBase64(img) { 
    // Create an HTML5 Canvas 
    var canvas = $('<canvas></canvas>') 
        .attr('width', img.width) 
        .attr('height', img.height); 

    // Initialize with image 
    var context = canvas.getContext("2d"); 
    context.drawImage(img, 0, 0); 

    // Convert and return 
    return context.toDataURL("image/png"); 
} 
</script> 

: 다음과 같이 보일 것이다