Question

我在上传前制作了图片预览代码，但有一个问题。我怎样才能预先制作多张图像。例如，我有3个图像，所以haj将知道有多少div必须为这些图像。

我认为我必须使用for循环但不确定如何。

这是我在HTML，CSS和jQuery中的代码

<input id="file" type="file" name="file[]" required multiple/>
<div id="imagePreview"></div>
<script>
    $(function() {
        $("#file").on("change", function()
        {
            var files = !!this.files ? this.files : [];
            if (!files.length || !window.FileReader) return; // no file selected, or no FileReader support

            if (/^image/.test( files[0].type)){ // only image file
            var reader = new FileReader(); // instance of the FileReader
            reader.readAsDataURL(files[0]); // read the local file

            reader.onloadend = function(){ // set image data as background of div
            $("#imagePreview").css("background-image", "url("+this.result+")");
            }
        }
    });
});
</script>
<style>
#imagePreview {
    width: 180px;
    height: 180px;
    background-position: center center;
    background-size: cover;
    -webkit-box-shadow: 0 0 1px 1px rgba(0, 0, 0, .3);
    display: inline-block;
}
</style>

Answer 1

解决方案是here

我刚刚更改了主脚本：

var inputLocalFont = document.getElementById("file");
inputLocalFont.addEventListener("change",previewImages,false);

function previewImages(){
    var fileList = this.files;

    var anyWindow = window.URL || window.webkitURL;

        for(var i = 0; i < fileList.length; i++){
          var objectUrl = anyWindow.createObjectURL(fileList[i]);
          $('#imagePreview').append('<img src="' + objectUrl + '" />');
          window.URL.revokeObjectURL(fileList[i]);
        }       
}

jQuery在上传之前显示多个图像缩略图

1 个答案: