javascript jquery preview image before upload

Question

Refs:

How to preview a image before upload using JavaScript or jquery? javascript - image preview before upload How to upload preview image before upload through JavaScript

didn't worked for me... from above refs some only worked in ff and some is uploading first and then only showing preview.

I find the exact solution in: http://blueimp.github.com/jQuery-File-Upload/

It works in all i have tested.

I find it working but my code isn't working. So what is the keypoint blueimp is following and i missing for enabling image preview before upload.

I tried with :

        $('.hidFileBtn').live('change', function(e){
            $childImg = $(this).closest('.parent').find('img.previewImg');
            var FileName = $(this).val();
            console.log(FileName + "-" + $(this)[0].value);
            $childImg[0].src = $(this).val();
        });

But no luck.

Have you tried from: http://saravani.wordpress.com/2012/03/14/preview-of-an-image-before-it-is-uploaded/ — Snake Eyes, Sep 30 '12 at 09:34

score 0 · Answer 1 · answered Jun 09 '16 at 07:08

Write this code in your javascript and create a file button attach onchange event like this onchange="preview_image(event)" code from this Display Image Before Upload tutorial

function preview_image(event) 
{
  var reader = new FileReader();
  reader.onload = function()
  {
    var output = document.getElementById('output_image');
    output.src = reader.result;
  }
  reader.readAsDataURL(event.target.files[0]);
}

score 0 · Answer 2 · edited Jun 09 '16 at 10:03

0

You can try the FileReader of HTML5.If you want to support IE, use this :

div.css({'filter':'progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="' + input.val() + '")'});

edited Jun 09 '16 at 10:03

DhiaTN

7,835
9
48
63

answered Jun 09 '16 at 07:23

HongShaoRou

9
2

score 0 · Answer 3 · answered Feb 15 '18 at 06:21

This link has a good answer: Preview an image before it is uploaded

<input type = "file" name = "fileFind" onchange = "readURL(this)" id = "fileFind" />
<img id = "imagePreview" src = "" alt = "" />

function readURL(input) {
if (input.files && input.files[0]) {
    var reader = new FileReader();

    reader.onload = function (e) {
        $('#imagePreview').attr('src', e.target.result);
    }

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

score 0 · Answer 4 · answered Oct 04 '19 at 12:37

<html>
<head>
<script type='text/javascript'>
function preview_image(event) 
{
 var reader = new FileReader();
 reader.onload = function()
 {
  var output = document.getElementById('output_image');
  output.src = reader.result;
 }
 reader.readAsDataURL(event.target.files[0]);
}
</script>
<style>
body
{
 width:100%;
 margin:0 auto;
 padding:0px;
 font-family:helvetica;
 background-color:#0B3861;
}
#wrapper
{
 text-align:center;
 margin:0 auto;
 padding:0px;
 width:995px;
}
#output_image
{
 max-width:300px;
}
</style>
</head>
<body>
<div id="wrapper">
 <input type="file" accept="image/*" onchange="preview_image(event)">
 <img id="output_image"/>
</div>
</body>
</html>

javascript jquery preview image before upload

4 Answers4