FileReader를 사용하여 이미지를 선택하고 표시하십시오.

Question

여기 내 문제입니다. 나는이 작은 코드를 사용하여 다시로드하지 않고도 라이브를 업로드 할 수 있습니다.하지만 readURL(input)에는 클래스가 없으므로 하나의 img에서만 작동합니다. noname-input에서 직접 작동하며, 클래스 readURL(input.joint)을 추가 할 때 오류가 발생합니다! 여기 내 코드는 다음과 같습니다.

<input class="joint" type='file' id="imgInp" /> 
    <img style="width:45px" id="blah" src="#" alt="your image" /> 


<script type="text/javascript"> 
function readURL(input) { 

    if (input.filers && input.files[0]) { 
     var reader = new FileReader(); 

     reader.onload = function (e) { 
      $('#blah').attr('src', e.target.result); 
     } 

     reader.readAsDataURL(input.files[0]); 
    } 
} 

$("#imgInp").change(function(){ 
    readURL(this); 
}); 
</script> 

이 입력을 고유하게 만들기 위해이 jquery 함수에 ID 또는 클래스를 추가해야합니다. 나는 오타 수정 때

이

<input class="joint" type='file' id="imgInp" /> 
     <img style="width:45px" id="blah" src="#" alt="your image" /> 


    <script type="text/javascript"> 
    function readURL(input.joint) { 

     if (input.joint.filers && input.joint.files[0]) { 
      var reader = new FileReader(); 

      reader.onload = function (e) { 
       $('#blah').attr('src', e.target.result); 
      } 

      reader.readAsDataURL(input.joint.files[0]); 
     } 
    } 

    $("#imgInp").change(function(){ 
     readURL(this); 
    }); 
    </script> 


<input class="file2" type='file' id="imgInp" /> 
     <img style="width:45px" id="blah" src="#" alt="your image" /> 


    <script type="text/javascript"> 
    function readURL(input.file2) { 

     if (input.file2.filers && input.file2.files[0]) { 
      var reader = new FileReader(); 

      reader.onload = function (e) { 
       $('#blah').attr('src', e.target.result); 
      } 

      reader.readAsDataURL(input.file2.files[0]); 
     } 
    } 

    $("#imgInp").change(function(){ 
     readURL(this); 
    }); 
    </script> 

Answer 1

, 그래서 선택은 첫 번째 하나를 선택합니다, 결국 이벤트는 바인딩 된 첫 번째 입력 필드와 $('#blah')의 선택도 포함됩니다. 입력과 관련하여 상대 이미지를 선택해야합니다. 당신도 스크립트를 복제하지 않아도됩니다. $(input).next('img').attr('src', e.target.result);

같은 입력에 다음 이미지 태그 상대를 선택 그래서 시도 :

function readURL(input) { 

    if (input.files && input.files[0]) { 
     var reader = new FileReader(); 

     reader.onload = function (e) { 
      $(input).next('img').attr('src', e.target.result); 
     } 

     reader.readAsDataURL(input.files[0]); 
    } 
} 


$(function(){ 
    $(".upld").change(function() { //set up a common class 
     readURL(this); 
    }); 
}); 

Fiddle

Answer 2

귀하의 코드가 나를 위해 올바르게 작동 : 내가 할 노력하고있어

http://jsfiddle.net/s6ttw/

업데이트 : 여기

if (input.filers && input.files[0]) { 
      ^^^^^^ 
if (input.files && input.files[0]) { 

은 예입니다 :

yo 당신이 클래스 대신에 id를 사용할 필요가 있다고 생각하는 방식으로 작업하기를 원합니다.

여기 당신을 위해 무엇을 요구하는지의 좋은 예입니다 : 모든 이상 (imgInp 및 blah) 중복 ID를 가지고 http://jsfiddle.net/s6ttw/1/

Answer 3

좋아, 당신이 시도하고 있다는 사실이 점이있는 함수의 인수에 클래스를 추가 할 수 표기법은 Javascript가 간단한 StackOverflow 응답으로 설명 할 수있는 것보다 더 자세히 알아야하지만 다음과 같이 해보겠습니다 :

• input (readURL(input))은 변수 이름과 비슷한 인수 이름이므로 어떤 식 으로든 확장 할 수 없습니다. readURL으로 전화를 걸었을 때의 참조 번호입니다.이 경우 코드의 끝 부분을 보면 this에 대한 참조입니다. this은 전달한 jQuery 선택기에서 참조하는 요소를 가리 킵니다 : "#imgInp". 대신 .joint 클래스를 사용하려면

그래서, 그냥 jQuery를 선택기로 그에서 통과 : 여러 .joint 요소를 가지고 가정, 그러나

$(".joint").change(function(){ 
    readURL(this); 
}); 

• , 당신의 readURL 함수는 것 없다 현재 src (#blah) 만 변경하도록 설계되어 더 이상 올바르게 작동합니다. 당신이해야 할 일은 img에 해당하는 각 요소의 src을 변경하는 것입니다.

  <input class="joint" type='file' /> 
  <img class="joint-img" style="width:45px" src="#" alt="your image" /> 
  
  <input class="joint" type='file' /> 
  <img class="joint-img" style="width:45px" src="#" alt="your image" /> 
  
  <input class="joint" type='file' /> 
  <img class="joint-img" style="width:45px" src="#" alt="your image" /> 
  

  당신은 모든 요소를 ​​한 후 당신의 readURL 기능을 배치하고 다음과 같이 reader.onload 섹션을 변경할 수 :이 같은 일부 HTML이 있다면

그래서,

function readURL(input) { 
    if (input.files && input.files[0]) { 
     var reader = new FileReader(); 

     reader.onload = function (e) { 
      $(input).next('.joint-img').attr('src', e.target.result); 
     } 

     reader.readAsDataURL(input.files[0]); 
    } 
} 

$(".joint").change(function(){ 
    readURL(this); 
});