JS——圖片處理（input type='file'）演練
阿新 • • 發佈：2018-12-11
今天我們就玩一下怎麼在我們的網頁中像更改頭像一樣更換圖片
效果圖如下：
當點選左邊的圖片，就彈出選擇框，可以選擇想要的圖片將原圖替換，是不是很實用，接下來就看看怎麼實現的吧
1、body部分
<body> <div id="divimg"> <img src="1.png" id="imgview"/> <input type="file" id="headimg" onchange="getimg(this)" multiple="multiple" capture="camera" accept="image/*" /><!--1.在標籤上宣告只接受影象multiple="multiple"capture="camera" accept="image/*" --> </div> </body>
2、style樣式部分
<style> #divimg{ border:1px solid #F00; display:inline-block; width:150px; height:150px; border-radius: 50%; } img{ width: 150px; height: 150px; border-radius: 50%; } #headimg{ display: inline-block; float: left; width: 150px; height: 150px; position: relative; top: -150px; opacity: 0; border-radius: 50%; } </style>
3、sj指令碼部分
<script src="jquery-1.8.3.min.js"></script> <script> function getimg(obj){ var f=obj.files.item(0);//obj.files.item(0); 獲取當前選中檔案物件//3.構建檔案解析器，讀取檔案 var freader=new FileReader();//建立檔案讀取器 freader.readAsDataURL(f); //在影象載入完成時，進行復制 freader.onload=function(event){ var src=event.target.result; $("#imgview").attr("src",src); }; } </script>
最後就可以實現想要實現的圖片替換了