Geek asks and answers

Download image using preview and delete

Ask the following questions and get answers to the following script, which will view the photo before downloading. script from http://jsbin.com/uboqu3/edit#javascript,html

1) the script works for Firefox, not suitable for IE. How to make this work for IE?

2) He has no way to delete the photo. You need something like a small “X” image set to Preview Photo, when you click this “X” the photo will be deleted. Can someone provide 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>
+3
source share
6 answers

Demo

Tested in multiple browsers, Chrome, Fx, Safari 6 (can anyone check 5?)

IE8 XP - , , @Gunasekaran ,

- > -- > - > - " " "".

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

, IE8 XP:

Example

createObjectURL,

onclick, , (onchange )

HTML

+6

, Internet Explorer 10... FileReader() ​​ IE10.. Chrome 7 Firefox 3.6

FileReader caniuse.com

+2

@user1315468 IE8 :

- > -- > - > " " "".

mplungjan. , .

+1

** I have embedded the full working code for all browsers.

NOTE. Sometimes Internet Explorer can block scripts, so 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>
0
source

FileReader is great for reading the contents of an image or file. But think that the file you were reading was large 20 MB reading it, since dataURL is going to create a JS object that is large. How do you avoid this?

0
source

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

0
source

More articles:


All Articles