는 내가 원하는 입력

Question

를 클릭 할 때에 이미지 추가 : CodePen

function readImage(input) { 
    if (input.files && input.files[0]) { 
    var reader = new FileReader(); 
    reader.onload = function(e) { 
     $('.cert img').attr('src', e.target.result); 
     $('.cert label').css('opacity', '0'); 
    } 
    reader.readAsDataURL(input.files[0]); 
    } 
} 

Answer 1

이 꽤 완벽하지만, 법과 ks를 사용하여 여러 이미지를로드하고 중복 된 ID를 정리합니다. 당신은 당신의 CodePen JS 상자에 그것을 시도 할 수 있습니다 :

이

function readImage(input, element) { 
    if (input.files && input.files[0]) { 
    var reader = new FileReader(); 
    reader.onload = function(e) { 
     $(element).find("img").attr("src", e.target.result); 
    }; 
    reader.readAsDataURL(input.files[0]); 
    } 
} 

$("#certImg0").change(function() { 
    var element = $(this) 
    .parent() 
    .clone(); 
    $(element).find('input').remove(); 
    $(element).find('label').remove(); 
    element.insertAfter($(this).parent()); 
    readImage(this, element); 
}); 

이의 목적은 readImage 기능과로드 된 새로운 이미지로 생성 된 실제 요소를 생성 요소를 가지고 전달하는 것입니다

직접입니다 새 div 구조의 img 요소에 저장됩니다.

(이는 img 요소가있는 div 만 생성하도록 최적화 할 수 있으며 새 이미지를 클릭 할 수 없도록 만듭니다.) 실제로 입력 및 레이블을 삭제하는 코드를 수정했습니다.