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 的

<div class="row">
    <div class="large-12 medium-12">
        <input type="file" name='file' id="upload-image" multiple></input>
            <div id="thumbnail">
            </div>
    </div>    
</div>

的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

图片上传预览javascript

0 个答案: