实现原生button上传文件

<img id="head_img" src="./11.jpg" style="width: 100%;height: 100%;" alt="">

<input type="file" name="xx" id="upload_head_img" style="display:none" />
<input type="button" value="修改头像" id="btn" class="btn" style="width: 140px;height: 40px;" onclick="document.getElementById('upload_head_img').click();" />


document.getElementById("upload_head_img").addEventListener("change",(e)=>{
					// console.log(e.target.files[0])
					var reader = new FileReader(); 
					 reader.readAsDataURL(e.target.files[0]);  
						reader.onload = function(){  
						// console.log(reader.result); 
						 document.getElementById("head_img").src = reader.result
					}  
				})

最后

以上就是复杂果汁为你收集整理的实现原生button上传文件的全部内容，希望文章能够帮你解决实现原生button上传文件所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。