Image Upload with Preview and Delete

javascript jquery upload

26,015

Solution 1

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

Solution 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

Solution 3

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.

26,015

Author by

user1315468

Updated on November 08, 2020

Comments

user1315468 over 3 years

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>

user1315468 about 12 years

Sorry, your answer does not work. Tested it on IE 8 and it did not work.
Manse about 12 years

@user1315468 im slightly confused ... In my answer I told you it will not work in IE8 ... see the links I added
user1315468 about 12 years

Sorry, your solution does not work. Tested it on IE8, and it did not work.
user1315468 about 12 years

Sorry, I provided an incorrect comment. Any solutions for older Browsers?
Manse about 12 years

@user1315468 just a quick google returns this -> code.google.com/p/image-upload-preview (never used it before but says it supports IE8
mplungjan about 12 years

Uploaded a new demo and updated the code. Works including the hide button - for me IE8 XP, FX 10
user1315468 about 12 years

Sorry, tried your code on my IE8 but still not working, see the Screen Shot of my IE8 for your code: asuma.com/user1231/ss-120418.jpg The preview pic appeared as a broken image.
mplungjan about 12 years

What version on what platform?
user1315468 about 12 years

IE8 Version:8.0.6001.18702 Windows XP
mplungjan about 12 years

Can you add plungjan.name to trusted sites? - You can remove it again after testing. I will not harm your browser...
user1315468 about 12 years

Sorry, I don't understand your request of adding plungjan.name to trusted sites. Advise me how to do it.
mplungjan about 12 years

Since it will likely allow what you want and is also likely the only difference between your IE8 and mine. Here is how recipester.org/Recipe:Add_a_Site_to_Trusted_Sites_76851969
user1315468 about 12 years

Done. By the way, your demo site also doesn't work for my IE8. It shows a broken image.
mplungjan about 12 years

I cannot help you. Works perfectly on my IE8 on XP. Did you try other images?
mplungjan about 12 years

However the DEMO link is dead
Manse about 12 years

@mplungjan you are right ...any better (working) alternatives ?
mplungjan about 12 years

Mine on this page - it does not work on OPs browser but works on mine. Does it work on yours too?
mplungjan about 12 years

There is another part of the script for browsers without filereader support. Look at the code. Can you try it in IE please?
mplungjan over 10 years

previewImg is not accessible via document.form2 unless it is <input type="image"
helloWorld over 7 years

Hi, I found a bug. After you click [X] you can't add previous image again. Only new. How to fix it?
mplungjan over 7 years

stackoverflow.com/questions/12030686/… - I updated the answer. Thanks