Image Upload with Preview and Delete

Question

Have the followig questions and need answers regarding the following script that will Preview a Photo before upload. The script is from http://jsbin.com/uboqu3/edit#javascript,html

1) The script works for Firefox, no good for IE. How to make it works for IE?

2) It does not have a method to delete the photo. Needs something like a small image "X" installed on the Preview Photo, clicking this "X" will delete the photo. Can anyone supply this solution?

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();

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

        reader.readAsDataURL(input.files[0]);
    }
}
</script>

<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }
</style>
</head>
<body>
<input type='file' onchange="readURL(this);" />
<img id="img_prev" src="#" alt="your image" />
</body>
</html>

Yeah, can you provide some more information or post an example into http://jsfiddle.net/ — Rob Angelier, Apr 18 '12 at 09:36

score 6 · Answer 1 · edited May 23 '17 at 12:01

6

Demo

Tested on several browsers, Chrome, Fx, Safari 6 (could someone test 5?)

Works on my IE8 on XP without any changes in settings but as @Gunasekaran mentions later on this page you may need to

Open Tools->internet option-> security tab-> custom level - locate the setting "Include local directory path when uploading files to a server" and click on Enable.

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Image preview</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
var blank="http://upload.wikimedia.org/wikipedia/commons/c/c0/Blank.gif";
function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();

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

        reader.readAsDataURL(input.files[0]);
    }
    else {
      var img = input.value;
        $('#img_prev').attr('src',img).height(200);
    }
    $("#x").show().css("margin-right","10px");
}
$(document).ready(function() {
  $("#x").click(function() {
    $("#img_prev").attr("src",blank);
    $("#x").hide();  
  });
});
</script>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }
#x { display:none; position:relative; z-index:200; float:right}
#previewPane { display: inline-block; }
</style>
</head>
<body>
<section>
<input type='file' onchange="readURL(this);" /><br/>
<span id="previewPane">
<img id="img_prev" src="#" alt="your image" />
<span id="x">[X]</span>
</span>
</section>
</body>
</html>

Looks like this in IE8 on XP:

Example

A newer method is createObjectURL which I have not implemented

Update You will need to add an onclick to clear the file input if you want to allow the user to select the same image twice (onchange does not trigger then)

HTML input file selection event not firing upon selecting the same file

edited May 23 '17 at 12:01

Community

1
1

answered Apr 18 '12 at 09:44

mplungjan

169,008
28
173
236

2

Sorry, your solution does not work. Tested it on IE8, and it did not work. – user1315468 Apr 18 '12 at 10:00
Uploaded a new demo and updated the code. Works including the hide button - for me IE8 XP, FX 10 – mplungjan Apr 18 '12 at 12:45
Sorry, tried your code on my IE8 but still not working, see the Screen Shot of my IE8 for your code: http://www.asuma.com/user1231/ss-120418.jpg The preview pic appeared as a broken image. – user1315468 Apr 18 '12 at 16:34
What version on what platform? – mplungjan Apr 18 '12 at 17:10
IE8 Version:8.0.6001.18702 Windows XP – user1315468 Apr 18 '12 at 17:23
Can you add plungjan.name to trusted sites? - You can remove it again after testing. I will not harm your browser... – mplungjan Apr 18 '12 at 17:33
Sorry, I don't understand your request of adding plungjan.name to trusted sites. Advise me how to do it. – user1315468 Apr 18 '12 at 17:50
Since it will likely allow what you want and is also likely the only difference between your IE8 and mine. Here is how http://www.recipester.org/Recipe:Add_a_Site_to_Trusted_Sites_76851969 – mplungjan Apr 18 '12 at 18:56
Done. By the way, your demo site also doesn't work for my IE8. It shows a broken image. – user1315468 Apr 18 '12 at 20:01
I cannot help you. Works perfectly on my IE8 on XP. Did you try other images? – mplungjan Apr 19 '12 at 05:46
Hi, I found a bug. After you click [X] you can't add previous image again. Only new. How to fix it? – helloWorld Nov 08 '16 at 06:29
1

http://stackoverflow.com/questions/12030686/html-input-file-selection-event-not-firing-upon-selecting-the-same-file - I updated the answer. Thanks – mplungjan Nov 08 '16 at 06:34

score 2 · Answer 2 · answered Apr 18 '12 at 09:36

2

This will not work on anything less that Internet Explorer 10 ... FileReader() support isn't introduced until IE10 .. it will work with Chrome 7 and Firefox 3.6

See the docs for support of FileReader or caniuse.com here

answered Apr 18 '12 at 09:36

Manse

37,765
10
83
108

Sorry, your answer does not work. Tested it on IE 8 and it did not work. – user1315468 Apr 18 '12 at 09:58
@user1315468 im slightly confused ... In my answer I told you it will not work in IE8 ... see the links I added – Manse Apr 18 '12 at 09:59
Sorry, I provided an incorrect comment. Any solutions for older Browsers? – user1315468 Apr 18 '12 at 10:02
@user1315468 just a quick google returns this -> http://code.google.com/p/image-upload-preview/ (never used it before but says it supports IE8 – Manse Apr 18 '12 at 10:03
However the DEMO link is dead – mplungjan May 04 '12 at 07:33
@mplungjan you are right ...any better (working) alternatives ? – Manse May 04 '12 at 07:37
Mine on this page - it does not work on OPs browser but works on mine. Does it work on yours too? – mplungjan May 04 '12 at 08:32
There is another part of the script for browsers without filereader support. Look at the code. Can you try it in IE please? – mplungjan May 04 '12 at 12:49

score 1 · Answer 3 · answered Jul 05 '12 at 07:19

In reply to last response of @user1315468 IE8 needs a security settings change:

Open Tools->internet option-> security tab-> custom level locate the setting "Include local directory path when uploading files to a server" and click on Enable.

After this change, you can reopen the browser with mplungjan's demo link. Hope this helps.

score 0 · Answer 4 · answered Mar 06 '13 at 12:40

**I have Pasted the complete working code for all browsers..

NOTE: sometimes Internet Explorer may block scripts,so inorder to view the image click on the prompt and "Allow blocked content".Below is the working code...**

<html>
<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>

</head>

<body>
<form name="form2">

<div>
<input type="file"  name="myFile"   id="myFile" onchange="readURL(this);"></input>
</div>

<div>
<img id="previewImg" src="#" />
</div>

</form>
<script>

function readURL(input) {

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

    reader.onload = function (e) {
        $('#previewImg')
            .attr('src', e.target.result)
            .width(130);
    }
reader.readAsDataURL(input.files[0]);

}else{
          var filename = "";
         filename = "file:\/\/"+input.value;
         document.form2.previewImg.src=filename;
         document.form2.previewImg.style.width="130px";

 }
}
 </script>   
</body>
</html>

previewImg is not accessible via document.form2 unless it is — mplungjan, Aug 07 '13 at 06:38

score 0 · Answer 5 · answered Jan 08 '14 at 23:58

0

FileReader sounds great to read content of image or file. But consider that file that you were reading was 20MB big, reading it as dataURL is going to create a JS object which is tat big. How do you avoid that ?

answered Jan 08 '14 at 23:58

Ankit Garg

384
3
4

score 0 · Answer 6 · answered Nov 03 '16 at 08:15

<img id="img1" alt="" runat="server"/> <span id="x" ></span> <asp:FileUpload runat="server" ID="FileUpload1" onchange="readURL(this)" />

<script type="text/javascript">
function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function (e) {
            $("#imgRepresentImage").attr("src", e.target.result).width(200);
        };
        reader.readAsDataURL(input.files[0]);
    } else {
        var img = input.value;
        $("#imgRepresentImage").attr("src", img).width(200);
    }
    $("#x").text('[X]');
}
$(document).ready(function () {
    $("#x").click(function () {
        $("#imgRepresentImage").attr("src", "").width(0);
        $("#x").text('');
        $("#representImageUpload").val('');
    });
});

Worked for me :)

Image Upload with Preview and Delete

6 Answers6

Linked