javascript实现input file上传图片预览效果

本文实例介绍了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 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>
希望本文所述对大家学习javascript程序设计有所帮助。