上传照片

js代码

 //上传照片
 $("#file").change(function(){
  drawTempPhoto();
 });
 //绘制照片
 function drawTempPhoto() {
   //检验是否为图像文件
   var file = document.getElementById("file").files[0];
   if(!/image\/\w+/.test(file.type)){
    alert("请选择图片文件。")
    return false;
   }
   var reader = new FileReader();
   // 将文件的格式以Data URL形式读入页面
    reader.readAsDataURL(file)
    //等待图片加载完成
    reader.onload = function (e) {
        //预览效果
        //加载图片,此处的this.result为base64格式     
        $(".upload").before("<li><img src='"+this.result+"'/></li>")        
        $("#file").val("")

//再次点击图片图片删除

        $(".appliance li:not(':last-child')").click(function(){
$(this).remove();
})
    }
}

html代码

<ul class="appliance">
<li class="upload">
<input type="file" accept="image/*" id="file"/>
<img src="img/jia.jpg"/>
</li>
</ul>




猜你喜欢

转载自blog.csdn.net/supercaojh/article/details/78353379