대기열에있는 이미지 파일의 축소판

Question

블로그 용 사용자 정의 CMS를 만들고 있습니다. 정말 간단 하긴하지만 이미지 업로드가 막혔습니다. 기본적으로 아직 업로드되지 않은 이미지 (파일 대기열의 이미지)에 대해 미리보기 이미지를 만들고 싶습니다. 자바 스크립트 또는 jQuery로 생성하는 단계를 알려주시겠습니까?

Answer 1

나는 그것을 매우 간단하게 이해했다. 업로드되는 이미지를 잡고 dataURL로 읽고 결과를 이미지 소스로 저장합니다.

HTML :

<input type="file" name="images[]" id="images" multiple /> 
<div id="images-container"></div> 

CSS :

.thumbnail { 
    width: 150px; 
    height: 150px; 
    margin: 15px; 
} 

그리고 마지막으로, 자바 스크립트 :

var images = document.getElementById('images'); 
var container = document.getElementById('images-container'); 

images.onchange = function() { 
    readFiles(images.files); 
} 

function readFiles(files) { 
    for (var i = 0; i < files.length; i++) { 
     processFile(files[i]); 
    } 
} 

function processFile(file) { 
    var reader = new FileReader(); 
    reader.readAsDataURL(file); 
    reader.onload = function (event) { 
     container.innerHTML = container.innerHTML + '<img src="' + reader.result + '" class="thumbnail" />'; 
    }; 
}