jquery - 如何使用 Jquery 在文件上传中选择多个图像提供预览？

Question

大家好，我有一个 fileuplaod，用户可以在其中选择多个图像，我想在上传之前显示这些所选图像的预览...目前我将其管理为单个图像预览，我如何提供多个图像的预览已选择

  function readURL(input) {
    var img = $(input).closest('div').find('img').first();
    var imgid=$(img).attr('id');
    if (input.files && input.files[0]) {
        alert(input.files);
        alert(input.files[0]);
        var reader = new FileReader();

        reader.onload = function (e) {
            $("#"+imgid)
                .attr('src', e.target.result);
        };

        reader.readAsDataURL(input.files[0]);
    }
}

 <input type="file"  accept="gif|jpg|jpeg|png" name="files[]" multiple onchange="readURL(this);" />

                    <img src="http://placehold.it/140x140" class="img-rounded" id="thumbnailimage">

有人可以帮忙吗...

Answer 1

好的，这是 really crude implementation

基本思想是，获取文件数组，循环遍历它，使用文件 API 添加图像，其中 src 值是 js 为您提供的 blob，而不是用户计算机上的路径。

var inputLocalFont = document.getElementById("image-input");
inputLocalFont.addEventListener("change",previewImages,false); //bind the function to the input

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

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

        for(var i = 0; i < fileList.length; i++){
          //get a blob to play with
          var objectUrl = anyWindow.createObjectURL(fileList[i]);
          // for the next line to work, you need something class="preview-area" in your html
          $('.preview-area').append('<img src="' + objectUrl + '" />');
          // get rid of the blob
          window.URL.revokeObjectURL(fileList[i]);
        }


}