Как получить и распечатать файл ввода типа ввода (изображение) с помощью jQuery?

Question

я получаю файл изображения и показать предварительный просмотр на моей первой странице с

<div class="form-group"> 
               <label class="control-label col-md-3">Event Image <span class="required"> 
               * </span> 
               </label> 
               <div class="col-md-6"> 
                <div class="fileinput fileinput-new" data-provides="fileinput"> 
                  <div class="fileinput-preview thumbnail" data-trigger="fileinput" style="width: 200px; height: 150px;"> 
                  </div> 
                   <div> 
                    <span class="btn default btn-file"> 
                    <span class="fileinput-new"> 
                    Choose</span> 
                    <span class="fileinput-exists"> 
                    Change</span> 
                    <input type="file" accept="image/*" name="eventImage" id="eventImage"> 
                    </span> 
                    <a href="javascript:;" class="btn red fileinput-exists" data-dismiss="fileinput"> 
                    Remove</a> 
                   </div> 
                </div> 
               </div> 

Затем на странице подтверждения я получаю изображение с

<div class="form-group"> 
               <label class="control-label col-md-3">Event Image:</label> 
               <div class="col-md-4"> 
                <div class="fileinput-preview thumbnail" data-trigger="fileinput" style="width: 200px; height: 150px;"> 
                  </div> 
                <p class="form-control-static" data-display="eventImage"> 
                </p> 
               </div> 
              </div> 

В моем файле JQuery,

var displayConfirm = function() { 
      $('#tab5 .form-control-static', form).each(function(){ 
       var input = $('[name="'+$(this).attr("data-display")+'"]', form); 
       if (input.is(":radio")) { 
        input = $('[name="'+$(this).attr("data-display")+'"]:checked', form); 
       } 
       if (input.is(":text") || input.is("textarea")) { 
        $(this).html(input.val()); 
       } else if (input.is("select")) { 
        $(this).html(input.find('option:selected').text()); 
       } else if (input.is(":radio") && input.is(":checked")) { 
        $(this).html(input.attr("data-title")); 
       } else if (input.is("[type=number]")) { 
        $(this).html(input.val()); 
       } else if (input.is("[type=file]")) { 
        $(this).html(input.val()); 
       } 
      }); 
     } 

Я просто хочу показать предварительный просмотр выбранного изображения на странице подтверждения, как на первой странице.

Спасибо за помощь

Answer 1

Hope you can take help from this - 
To show the preview of an uploaded image (preview is visible on same 
page), you can do like this 

<form ...> 
<div class="form-group"> 
<label class="sr-only" for="uploaded_picture">Choose an image</label> 
<input id="uploaded_picture" name="picture" 
onchange="display_thumbnail(this);" type="file"> 
</div> 

<div class="form-group"> 
<img id="preview"src="../../../media/profile_images/default_DP.png" 
alt="Profile Picture Not Available"> 
</div> 
<button type="submit" class="btn btn-primary">Submit</button> 
</form> 

В JavaScript,
функция display_thumbnail (вход) {
если (input.files & & input.files [0]) {
вар читатель = новый FileReader (); reader.onload = function (e) {
$ ('# preview'). Attr ('src', e.target.result) .width (200) .height (180);
};
reader.readAsDataURL (input.files [0]);
} }