Home >Web Front-end >JS Tutorial >Javascript implements input file upload image preview effect_javascript skills
The example in this article introduces the detailed code of javascript to realize the preview effect of input file upload image. It is shared with everyone for your reference. The specific content is as follows
Operation rendering:
Detailed implementation code:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript" src="jquery-1.11.1.min.js"></script> <style type="text/css"> .imgbox,.imgbox1 { float: left; margin-right: 20px; margin-top: 20px; position: relative; width: 182px; height: 142px; border: 1px solid red; overflow: hidden; } .imgbox1{border: 1px solid blue; } .imgnum{ left: 0px; top: 0px; margin: 0px; padding: 0px; } .imgnum input,.imgnum1 input { position: absolute; width: 182px; height: 142px; opacity: 0; } .imgnum img,.imgnum1 img { width: 100%; height: 100%; } .close, .close1 { color: red; position: absolute; left: 170px; top: 0px; display: none; } </style> </head> <body> <div id="img"> <div class="imgbox"> <div class="imgnum"> <input type="file" class="filepath" /> <span class="close">X</span> <img src="btn.png" class="img1" /> <img src="" class="img2" /> </div> </div><div class="imgbox"> <div class="imgnum"> <input type="file" class="filepath" /> <span class="close">X</span> <img src="btn.png" class="img1" /> <img src="" class="img2" /> </div> </div> <div class="imgbox"> <div class="imgnum"> <input type="file" class="filepath" /> <span class="close">X</span> <img src="btn.png" class="img1" /> <img src="" class="img2" /> </div> </div> <div class="imgbox"> <div class="imgnum"> <input type="file" class="filepath" /> <span class="close">X</span> <img src="btn.png" class="img1" /> <img src="" class="img2" /> </div> </div> <div class="imgbox"> <div class="imgnum"> <input type="file" class="filepath" /> <span class="close">X</span> <img src="btn.png" class="img1" /> <img src="" class="img2" /> </div> </div> <div class="imgbox"> <div class="imgnum"> <input type="file" class="filepath" /> <span class="close">X</span> <img src="btn.png" class="img1" /> <img src="" class="img2" /> </div> </div> <div class="imgbox"> <div class="imgnum"> <input type="file" class="filepath" /> <span class="close">X</span> <img src="btn.png" class="img1" /> <img src="" class="img2" /> </div> </div> <div class="imgbox"> <div class="imgnum"> <input type="file" class="filepath" /> <span class="close">X</span> <img src="btn.png" class="img1" /> <img src="" class="img2" /> </div> </div> <div class="imgbox"> <div class="imgnum"> <input type="file" class="filepath" /> <span class="close">X</span> <img src="btn.png" class="img1" /> <img src="" class="img2" /> </div> </div> <div class="imgbox1"> <div class="imgnum"> <input type="file" class="filepath1" /> <span class="close1">X</span> <img src="btn.png" class="img11" /> <img src="" class="img22" /> </div> </div> </div> </body> <script type="text/javascript"> $(function() { $(".filepath").on("change",function() { alert($('.imgbox').length); var srcs = getObjectURL(this.files[0]); //获取路径 $(this).nextAll(".img1").hide(); //this指的是input $(this).nextAll(".img2").show(); //fireBUg查看第二次换图片不起做用 $(this).nextAll('.close').show(); //this指的是input $(this).nextAll(".img2").attr("src",srcs); //this指的是input $(this).val(''); //必须制空 $(".close").on("click",function() { $(this).hide(); //this指的是span $(this).nextAll(".img2").hide(); $(this).nextAll(".img1").show(); }) }) }) function getObjectURL(file) { var url = null; if (window.createObjectURL != undefined) { url = window.createObjectURL(file) } else if (window.URL != undefined) { url = window.URL.createObjectURL(file) } else if (window.webkitURL != undefined) { url = window.webkitURL.createObjectURL(file) } return url }; $(function() { $("#img").on("change",".filepath1",function() { //alert($('.imgbox1').length); var srcs = getObjectURL(this.files[0]); //获取路径 alert(srcs); //this指的是input /* $(this).nextAll(".img22").attr("src",srcs); //this指的是input $(this).nextAll(".img22").show(); //fireBUg查看第二次换图片不起做用*/ var htmlImg='<div class="imgbox1">'+ '<div class="imgnum1">'+ '<input type="file" class="filepath1" />'+ '<span class="close1">X</span>'+ '<img src="btn.png" class="img11" />'+ '<img src="'+srcs+'" class="img22" />'+ '</div>'+ '</div>'; $(this).parent().parent().before(htmlImg); $(this).val(''); //必须制空 $(this).parent().parent().prev().find(".img11").hide(); //this指的是input $(this).parent().parent().prev().find('.close1').show(); $(".close1").on("click",function() { $(this).hide(); //this指的是span $(this).nextAll(".img22").hide(); $(this).nextAll(".img11").show(); if($('.imgbox1').length>1){ $(this).parent().parent().remove(); } }) }) }) </script> </html>
I hope this article will be helpful to everyone learning JavaScript programming.