Предварительный просмотр перед отправкой.

Question

У меня есть HTML-скрипт вроде этого:

<div class="gallery"> 
    <output id="show_img1"></output> 
</div> 
<div class="fileinput-button"> 
    <input type="file" id="files1" name="files[]"/>      
</div> 
<div class="gallery"> 
    <output id="show_img2"></output> 
</div> 
<div class="fileinput-button"> 
    <input type="file" id="files2" name="files[]"/> 
</div> 
<div class="gallery"> 
    <output id="show_img3"></output> 
</div> 
<div class="fileinput-button"> 
    <input type="file" id="files3" name="files[]"/> 
</div> 

Я хочу изображения предварительного просмотра, которые были выбраны в теге <output></output> с идентификатором, как и выше в качестве идентификатора. Я пробовал это script в качестве справки.

Answer 1

здесь пример предварительного просмотра изображения на img теге

<input type="file" id="files1" name="files[]"/> 
    <img id="blah" src="#" alt="your image" /> 

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
<script> 
function readURL(input) { 
    if (input.files && input.files[0]) { 
     var reader = new FileReader();    
     reader.onload = function (e) { 
      $('#blah').attr('src', e.target.result); 
     }    
     reader.readAsDataURL(input.files[0]); 
    } 
} 

$("#files1").change(function(){ 
    readURL(this); 
}); 
</script> 

JS Fiddle Demo