Question

我正在尝试为每个上传的图片添加图片预览。

我已成功显示正在上传的图片名称列表，但我无法弄清楚如何添加图片预览。

这是我到目前为止所得到的：

$(document).on('change.bs.fileinput', '.fileinput', function(e) {
    var $this = $(this),
        $input = $this.find('input[type=file]'),
        $span = $this.find('.fileinput-filename');
        $ul = $("div").find('.upload-list');
    if($input[0].files !== undefined && $input[0].files.length > 1) {                
        $span.html('<span>'+$input[0].files.length+' files selected</span>'); 
        $ul.html('<label for="albumImages">Uploading Images</label><ul class="list-group"><li class="list-group-item">' + $.map($input[0].files, function(val) { return val.name; }).join('</li><li class="list-group-item">') + '</li></ul>');
        $('.upload-list').show();
        $('.album-inputs').show();
    } else {
        $('.upload-list').hide();
        $('.album-inputs').show();
    }
});

我想将图片添加到名称的左侧。有人可以指导我朝正确的方向发展吗？

Answer 1

创建一个img标签并将src放入其中并附上相应的照片

Answer 2

根据@PatrickEvans的评论，我找到了一个解决方案。这是我做的：

window.URL    = window.URL || window.webkitURL;
var elBrowse  = document.getElementById("upload_image"),
    elPreview = document.getElementById("upload_list"),
    useBlob   = false && window.URL; // `true` to use Blob instead of Data-URL

function readImage (file) {
    var reader = new FileReader();

    reader.addEventListener("load", function () {
        var image  = new Image();           

        image.src = useBlob ? window.URL.createObjectURL(file) : reader.result;

        image.addEventListener("load", function () {
            var imageInfo = '<img src="'+image.src+'" class="img-rounded"/>'+' '+
                            file.name    +' '+                                  
                            image.width  +'×'+
                            image.height +' '+
                            file.type    +' '+
                            Math.round(file.size/1024) +'KB';
            //elPreview.appendChild( t );
            elPreview.insertAdjacentHTML("beforeend", '<ul class="list-group"><li class="list-group-item">'+imageInfo +'</li></ul>');
        });         

        if (useBlob) {
            window.URL.revokeObjectURL(file); // Free memory
        }
    });

    reader.readAsDataURL(file);

}

elBrowse.addEventListener("change", function() {
    var files  = this.files;
    var errors = "";

    if (!files) {
        errors += "File upload not supported by your browser.";
    }

    if(files.length > 1) { 
        alert(files.length);             
        $('.fileinput-filename').html('<span>'+files.length+' files selected</span>');
    }

    if (files && files[0]) {
        for(var i=0; i<files.length; i++) {
            var file = files[i];
            if ( (/\.(png|jpeg|jpg|gif)$/i).test(file.name) ) {
                readImage( file ); 
            } else {
                errors += file.name +" Unsupported Image extension\n";  
            }
        }
    }

    if (errors) {
        alert(errors); 
    }
});

我现在唯一的问题是当我想要更改图像时，它会保留页面上的原始图像。

在上传之前为多个图像添加图像预览

2 个答案: