如何使用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 =函数（e）中{
$（ '＃预览'）ATTR（ 'SRC'，e.target.result）.WIDTH（200）.height（180）。
};
reader.readAsDataURL（input.files [0]）;
} }