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.

difficult without resorting to flash or applets i guess..

techfoobar
– techfoobar

2012-09-30 09:21:40 +00:00
Commented Sep 30, 2012 at 9:21 — techfoobar
– techfoobar, Commented Sep 30, 2012 at 9:21
Have you tried from: saravani.wordpress.com/2012/03/14/…

Snake Eyes
– Snake Eyes

2012-09-30 09:34:01 +00:00
Commented Sep 30, 2012 at 9:34 — Snake Eyes
– Snake Eyes, Commented Sep 30, 2012 at 9:34

rahul · Accepted Answer · 2016-06-09 07:08:39Z

0

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]);
}

answered Jun 9, 2016 at 7:08

rahul

1

Sign up to request clarification or add additional context in comments.

Comments

Dhia · Accepted Answer · 2016-06-09 10:03:55Z

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 9, 2016 at 10:03

Dhia

10.7k11 gold badges62 silver badges70 bronze badges

answered Jun 9, 2016 at 7:23

HongShaoRou

92 bronze badges

Comments

Anon · Accepted Answer · 2018-02-15 06:21:55Z

0

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]);
}
}

answered Feb 15, 2018 at 6:21

Anon

598 bronze badges

Comments

Bharat Kumar · Accepted Answer · 2019-10-04 12:37:28Z

0

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

answered Oct 4, 2019 at 12:37

Bharat Kumar

971 silver badge2 bronze badges

Collectives™ on Stack Overflow

javascript jquery preview image before upload

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related