1 <div class="shai">
2     <img src="img/szp.png"/>
3     <input type="file" onchange='PreviewImage(this)' class="shaiIpt"/>
4     <p>限5张</p>
5 </div>
 1 //发表评论--上传照片
 2         //////定义上传方法函数
 3         var id="1";
 4         function PreviewImage(imgFile) { 
 5             
 6             var pattern = /(\.*.jpg$)|(\.*.png$)|(\.*.jpeg$)|(\.*.gif$)|(\.*.bmp$)/;      
 7             if(!pattern.test(imgFile.value)) { 
 8                alert("系统仅支持jpg/jpeg/png/gif/bmp格式的照片！");  
 9                imgFile.focus(); 
10             }else{
11                //定义图片路径 
12                var path;
13                //添加显示图片的HTML元素
14                id += 1;
15                $(".img-cont").append("<div><div id='"+id+"'><img src='' /></div><a class='hide delete-btn'>删除</a></div>");
16                //判断浏览器类型
17                if(document.all){ 
18                //兼容IE
19                 imgFile.select(); 
20                 path = document.selection.createRange().text;
21                 document.getElementById(id).innerHTML=""; 
22                 document.getElementById(id).style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='scale',src=\"" + path + "\")";//使用滤镜效果 
23                }else{
24                 //兼容其他浏览器 
25                 path = URL.createObjectURL(imgFile.files[0]);
26                 document.getElementById(id).innerHTML = "<img src='"+path+"' width='42' height='42' />"; 
27                }
28                //重置表单
29 //               resetForm(imgFile); 
30             } 
31         }  
32     
33         //重置表单,允许用户连续添加相同的图片
34 //        function resetForm(imgFile){
35 //          $("imgFile").parent()[0].reset();
36 //        }
37     
38         //控制"按钮"显示与隐藏
39         $(".img-cont").off("mouseenter","div").on("mouseenter","div",function(){
40             var that=this;
41             var dom=$(that).children("a");
42             dom.removeClass("hide");
43             //为点击事件解绑，防止重复执行
44             dom.off("click");
45             dom.on("click",function(){
46                 //删除当前图片
47                  dom.parent().remove();
48              });
49         }).off("mouseleave","div").on("mouseleave","div",function(){
50             var that=this;
51             $(that).children("a").addClass("hide");
52         })
 1 .shai{
 2     width: 130px;
 3     height: 100%;
 4     float: left;
 5     position: relative;
 6 }
 7 .shai img{
 8     float: left;
 9     margin-top: 8px;
10     margin-left: 2px;
11 }
12 .shai .shaiIpt{
13     display: block;
14     width: 76px;
15     height: 26px;
16     position: absolute;
17     top: 8px;
18     left: 2px;
19     opacity: 0;
20 }
21 .shai p{
22     width: auto;
23     height: 100%;
24     line-height: 44px;
25     float: left;
26     margin-left: 4px;
27     color: #888;
28 }