jq上传图片，实现本地预览（不通过接口）

最新推荐文章于 2024-09-21 16:11:59 发布

干了这碗小米汤儿

最新推荐文章于 2024-09-21 16:11:59 发布

阅读量1.4k

点赞数

分类专栏： jq 文章标签： jq 上传图片本地预览

本文链接：https://blog.csdn.net/MtangEr/article/details/87274556

版权

jq 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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 ;  
}

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