javascript - Image Upload with Preview and Delete

Have the followig questions and need answers regarding the following script that will Preview a Photo before upload. The script is from ,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=".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=".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>

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>

Share Improve this question edited Oct 17, 2013 at 9:28 Jonathan Root 5542 gold badges14 silver badges31 bronze badges asked Apr 18, 2012 at 9:33 user1315468 711 gold badge2 silver badges5 bronze badges

1 What error are you getting on IE ? – Manse Commented Apr 18, 2012 at 9:35
Yeah, can you provide some more information or post an example into jsfiddle.net – Rob Angelier Commented Apr 18, 2012 at 9:36

Add a comment |

6 Answers 6

Sorted by: Reset to default 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:

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

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

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.

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

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 ?

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

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Image Upload with Preview and Delete - Stack Overflow

6 Answers 6

与本文相关的文章

评论列表(0)