javascript - Upload And Remove image -
i have upload button on web page, if upload image should show preview below , upload image should show next image , third should show next second image , on, , once click click "x" image should removed. here code
<!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 type="text/javascript" src="//code.jquery.com/jquery-1.9.1.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]--> <script type="text/javascript">//<![cdata[ $(window).load(function(){ $("input:file").change(function () { if ($(this).val() !== "") { var file = $('#file_select')[0].files[0]; console.log(file.size); //console.log(file.width); var reader = new filereader(); var img = new image(); var _url = window.url || window.webkiturl; reader.readasdataurl(file); reader.onload = function(_file) { img.src= _file.target.result; //$('#img_preview').append('<img src="'+ img.src +'"/>'); $('#previewpane').append('<img id="img_prev" src="'+ img.src +'" alt="your image" /><span id="x">[x]</span>'); //console.log(img.src); console.log(img.width); } } }); });//]]> </script> <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' name="file" id="file_select" onchange="readurl(this);" /> <br/> <span id="previewpane"> </span> </section> </body> </html>
remove
readurl,onchange="readurl(this);"oninputdoing samething(i beleive)$("input:file").change.create
div.imagecontainerwrap bothimg,span, when x onspanclicked, knows image removed.add delegated click event listener
$('#previewpane'), told react everyclicksourced.remover, added class on span, don't need register each click event when new image coming.
<!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 type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"> </script> <script> var blank="http://upload.wikimedia.org/wikipedia/commons/c/c0/blank.gif"; </script> <!--[if ie]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <script type="text/javascript">//<![cdata[ $(window).load(function(){ $('input[type="file"]').change(function () { if ($(this).val() !== "") { var file = $('#file_select')[0].files[0]; console.log(file.size); //console.log(file.width); var reader = new filereader(); var img = new image(); var _url = window.url || window.webkiturl; reader.readasdataurl(file); reader.onload = function(_file) { // create container image , span x $imageitem = $('<div>').addclass('imageitem'); $(img).appendto($imageitem); $('<span>').html('x').addclass('remover').appendto($imageitem); img.src= _file.target.result; // append container panel $('#previewpane').append($imageitem); //console.log(img.src); console.log(img.width); } } // deletegate dynamically created span, don't have register // new event listener each time new imagecontainer created. $('#previewpane').on('click', '.remover', function() { $this = $(this); $this.parent('.imageitem').remove(); }); }); });//]]> </script> <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' name="file" id="file_select"/> <br/> <span id="previewpane"> </span> </section> </body> </html>
Comments
Post a Comment