使用Java脚本上载和显示多个图像 - 除非同时上传，否则不会识别以前的图像

Question

我有这个Jquery代码（见下文），允许用户打开文件浏览器并选择多个图像，然后显示它们供用户查看，之后他们可以将它们保存到数据库但是有问题，当您一次选择多个图像然后打开它时，它显示正常并将所有图像保存到数据库。

然而，当您选择一个然后单击打开，再单击浏览再上传另一个图像等等它们会正常显示，但是当用户保存它们时，只有最近选择的图像会保存到数据库中，我希望是能够一次选择并打开一个，然后仍然将它们全部保存到数据库中。

提前致谢！下面是代码：

<input type="file" name="files" value="" id="upload-image" multiple="multiple"/> <div id="thumbnail"></div><br />

<script>
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)

    fileDiv.addEventListener("click", function (e) {
        $(fileInput).show().focus().click().hide();
        e.preventDefault();
    }, false)

    fileDiv.addEventListener("dragenter", function (e) {
        e.stopPropagation();
        e.preventDefault();
    }, false);

    fileDiv.addEventListener("dragover", function (e) {
        e.stopPropagation();
        e.preventDefault();
    }, false);

    fileDiv.addEventListener("drop", function (e) {
        e.stopPropagation();
        e.preventDefault();

        var dt = e.dataTransfer;
        var files = dt.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");
            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)
            }
        }
    }
});