サムネイル（キュー内の画像ファイル）

Question

ブログ用のカスタムCMSを作成しています。それは本当にシンプルですが、私は画像のアップロードに立ち往生しています。基本的には、まだアップロードされていない画像（ファイルキューからの画像）のサムネイルを作成したいと思います。 JavaScriptや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; 
} 

、最終的には、のJavaScript：

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" />'; 
    }; 
}