本文实例介绍了javascript实现input file上传图片预览效果的详细代码，分享给大家供大家参考，具体内容如下
运行效果图：
具体实现代码:
<!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> <div> <input type="file" /> <span>X</span> <img src="btn.png" /> <img src="" /> </div> </div><div> <div> <input type="file" /> <span>X</span> <img src="btn.png" /> <img src="" /> </div> </div> <div> <div> <input type="file" /> <span>X</span> <img src="btn.png" /> <img src="" /> </div> </div> <div> <div> <input type="file" /> <span>X</span> <img src="btn.png" /> <img src="" /> </div> </div> <div> <div> <input type="file" /> <span>X</span> <img src="btn.png" /> <img src="" /> </div> </div> <div> <div> <input type="file" /> <span>X</span> <img src="btn.png" /> <img src="" /> </div> </div> <div> <div> <input type="file" /> <span>X</span> <img src="btn.png" /> <img src="" /> </div> </div> <div> <div> <input type="file" /> <span>X</span> <img src="btn.png" /> <img src="" /> </div> </div> <div> <div> <input type="file" /> <span>X</span> <img src="btn.png" /> <img src="" /> </div> </div> <div> <div> <input type="file" /> <span>X</span> <img src="btn.png" /> <img src="" /> </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>'+ '<div>'+ '<input type="file" />'+ '<span>X</span>'+ '<img src="btn.png" />'+ '<img src="'+srcs+'" />'+ '</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>
希望本文所述对大家学习javascript程序设计有所帮助。