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中：

function display_thumbnail(input) {  
  if (input.files && input.files[0]) {  
    var reader = new FileReader();
    reader.onload = function (e) {  
        $('#preview').attr('src', e.target.result).width(200).height(180);  
    };  
    reader.readAsDataURL(input.files[0]);  
  }
}

如何使用jQuery获取和打印预览输入类型文件（图像）？

1 个答案: