jq上传图片,实现本地预览 (不通过接口)

html部分

<div >
	<img id=" imgpic"  src="imgPath" alt="">
</div>
<input type="file" name="" class="imgbox" id="sczp">    

script部分

$(".imgbox").change(function(){
  var objUrl = _this.getObjectURL(this.files[0]) ;//获取文件信息  
     if (objUrl) {  
      $("#imgpic").attr("src", objUrl);  
   }  
 })      
 getObjectURL(file) {  
	 var url = null;   
	 if (window.createObjectURL!=undefined) {  
	  	url = window.createObjectURL(file) ;  
	 } else if (window.URL!=undefined) { // mozilla(firefox)  
	  	url = window.URL.createObjectURL(file) ;  
	 } else if (window.webkitURL!=undefined) { // webkit or chrome  
	  	url = window.webkitURL.createObjectURL(file) ;  
	 }  
	 return url ;  
} 

效果:
上传前
在这里插入图片描述
上传后
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/MtangEr/article/details/87274556