• When I upload the image can you tell me how to show image within the red box
• Providing code below

<div class="upload-image">
    <div class="upload-image-preview"></div>
    <input type="file" name="file" value="Upload Image" />
</div>

• When I upload the image can you tell me how to show image within the red box
• Providing code below

http://codepen.io/anon/pen/ZWXmpd

<div class="upload-image">
    <div class="upload-image-preview"></div>
    <input type="file" name="file" value="Upload Image" />
</div>

• javascript
• jquery
• css
• html

Share Improve this question Follow edited Apr 3, 2016 at 7:23 Ibrahim Khan 20.8k77 gold badges4545 silver badges5656 bronze badges asked Apr 3, 2016 at 6:52 user6015171user6015171

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

You can use something like this to display your image before upload.

var _URL = window.URL || window.webkitURL;

$("#file").change(function(e) {
    var image, file;
    if ((file = this.files[0])) {
        image = new Image();
        image.onload = function() {
				src = this.src;
        $('#uploadPreview').html('<img src="'+ src +'"></div>');
				e.preventDefault();
			}
        };
        image.src = _URL.createObjectURL(file);
});

#uploadPreview {
    border: 1px solid red;
    width: 200px;
    height: 200px;
    overflow: hidden;
}

#uploadPreview img {
  min-width: 100%;
  min-height: 100%;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" id="file"/>
<div id="uploadPreview">

</div>

You can do this using following jQuery.

$("input[name=file]").change(function () {
    if (this.files && this.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            var img = $('<img>').attr('src', e.target.result);
            $('.upload-image-preview').html(img);
        };

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

Use following CSS to keep image size same as the preview div.

.upload-image-preview img{
    width: 100%;
    height:  100%;
}

DEMO

After uploading the image you can return the path of image. And by js you can show that image on upload response via ajax call.