Показать предварительный просмотр фотографий, загруженных через форму html

Question

У меня есть форма, которая позволяет пользователям загружать x количество изображений. Когда они выбирают изображения со своего компьютера, есть кнопка, которую они могут щелкнуть, что позволяет им просматривать изображения перед отправкой формы.

Есть ли способ показать изображения автоматически без нажатия кнопки предварительного просмотра. На данный момент я использую функцию JS .click, но я бы предпочел, чтобы пользователям не нужно было ничего щелкнуть, чтобы увидеть, какие изображения они загрузили.

Вот код, который я использую.

В форме:

<div class="uploadWrapper"> 
    <p>Upload Images</p> 
    <input type="file" name="files[]" multiple="true" id="files" style="left: 0px;" /> 
</div> 
<input id="go" class="btn_img" type="button" value="Click to Preview Images"> 
<div id="images_upload"></div> 
<script type="text/javascript"> 
    $("#files").click(function(){ 
     $(".btn_img").show(); 
    }); 
</script> 

<?php include_once('upload/image-preview.php'); ?> 

Изображение-preview.php файл:

<script type="text/javascript"> 
function readURL(input) { 
    if (input.files && input.files[0]) { 
     var reader = new FileReader(); 

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

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

$("#file").change(function(){ 
    readURL(this); 
}); 


var reader = new FileReader(), 
    i=0, 
    numFiles = 0, 
    imageFiles; 


function readFile() { 
    reader.readAsDataURL(imageFiles[i]) 
} 

reader.onloadend = function(e) { 


    var image = $('<img class="prev_img">').attr('src', e.target.result); 
    $(image).appendTo('#images_upload'); 
    $("#images_upload img").wrap("<div class=\"an_image\">"); 


    if (i < numFiles) { 
     i++; 
     readFile(); 
    } 
}; 

$('#go').click(function() { 

    imageFiles = document.getElementById('files').files 

    numFiles = imageFiles.length; 
    readFile();   

}); 
</script> 

Что мне нужно сделать, чтобы не нажать кнопку «Нажмите, чтобы Предварительный просмотр изображений» кнопку увидеть изображения?

Спасибо!

Answer 1

Пройдите через input.files и создайте new FileReader() для каждого файла. jsFiddle Demo

HTML

<input type='file' class="imageUpload" multiple="true" /> 
<div class="imageOutput"></div> 

JS

$images = $('.images'); 

$(".imageUpload").change(function(){ 
    readURL(this); 
}); 

function readURL(input) { 

    if (input.files && input.files[0]) { 

     $.each(input.files, function() { 
      var reader = new FileReader(); 
      reader.onload = function (e) {   
       $images.append('<img src="'+ e.target.result+'" />') 
      } 
      reader.readAsDataURL(this); 
     }); 

    } 
} 

Answer 2

Благодаря @ Брайан

Это то, что я придумал. Предел 10.

$images = $('#images_upload') 

$(".imageUpload").change(function(event){ 
    readURL(this); 
}); 

function readURL(input) { 

    if (input.files[10]) { 
     alert('You can uploaded a maximum of 10 images'); 
    } else { 
     if (input.files && input.files[0]) { 
      $.each(input.files, function() { 
       var reader = new FileReader(); 
       reader.onload = function (e) {   
        $images.append('<img src="'+ e.target.result+'" />') 
        } 
        reader.readAsDataURL(this); 
       }); 
      }            
     } 
    }