如何为使用Jquery在fileuplaod中选择的多个图像提供预览? [英] How to provide a Preview For Multiple images selected in fileuplaod Using Jquery?

问题描述

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

Hi all i have an fileuplaod where user can select multiple images nad i want to show the preview for those selected images before upload...at present i manged it for the single image preview how can i provide preview for the multiple images selected

  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">

请在这里帮忙...

推荐答案

好，这是真正的粗略实现

基本思想是，获取文件数组，循环遍历，使用File API添加图像，其中src值是js给您播放的那个blob，而不是用户计算机上的路径.

The basic idea is, get the files array, loop through it, use the File API to add images where the src value is that blob which js gives you to play with, rather than the path on the users machine.

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]);
        }


}

这篇关于如何为使用Jquery在fileuplaod中选择的多个图像提供预览?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！