JavaScript图片预览

Posted 2020-12-14 拉布

预览选中的图片文件

• jQuery

  $("#selectImage").change(function(){
      $("#image").attr("src",URL.createObjectURL($(this)[0].files[0]));
  });
  

• Vue

  data:{
      image:""
  },
  methods:{
      imageReaderAndShow:function (e) {	//e是input type="file" 的change事件
  	let fileReader = new FileReader();
  	fileReader.readAsDataURL(e.target.files[0]);	//e.target.files[0]是选中的图片文件数据
  	fileReader.onload=function(){
              e.target.nextElementSibling.src=fileReader.result;	//e.target.nextElementSibling表示input控件的下一个兄弟元素，因为这里是把<img> 紧挨着放在 <input> 后面的
  	    this.image=e.target.files[0];	//这里是图片上传的时将文件数据赋值给this.image，可以放在方法外面
  	}
      }
  }
  

---

至此，若有纰漏，望各位不吝赐教