图片上传预览javascrip

Question

我正在尝试在上传前进行图像预览。但当我试图上传时，只有最新的上传。
示例：首先我上传了3张图片（显示选中了3张文件），然后我想再上传4张图片。我的问题是，它显示4个图像被选中（不是7个图像被选中），但是在图像预览中它们都是。 我使用python将它们上传到数据存储中，在数据存储中只有最新的图像。
Javascript

//<![CDATA[ 
$(function(){
jQuery(function ($) {
var fileDiv = document.getElementById("upload");
var fileInput = document.getElementById("upload-image");
console.log(fileInput);
fileInput.addEventListener("change", function (e) {
    var files = this.files
    showThumbnail(files)
}, false)

function showThumbnail(files) {
    for (var i = 0; i < files.length; i++) {
        var file = files[i]
        var imageType = /image.*/
        if (!file.type.match(imageType)) {
            console.log("Not an Image");
            continue;
        }

        var image = document.createElement("img");
        // image.classList.add("")
        var thumbnail = document.getElementById("thumbnail");
        image.file = file;
        thumbnail.appendChild(image)

        var reader = new FileReader()
        reader.onload = (function (aImg) {
            return function (e) {
                aImg.src = e.target.result;
            };
        }(image))
        var ret = reader.readAsDataURL(file);
        var canvas = document.createElement("canvas");
        ctx = canvas.getContext("2d");
        image.onload = function () {
            ctx.drawImage(image, 100, 100)
        }
    }
}
});
});
//]]> 

Html格式

^{pr2}$

Python

imagesnumber=len(self.get_uploads('file'))
while imagesnumber!=0: 
    image = self.get_uploads('file')[0]
    img = DateBase()
    img.blob_key = image.key()
    img.img_url = images.get_serving_url( image.key() )
    img.put()
    imagesnumber=imagesnumber-1