<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>美化input中的文件按鈕</title>
<style type="text/css"></style>
</head>
<body>
<div id="imgdisplay"><img src="000/images/food2.png"></div>
<label class="btn" for="file">點擊上傳圖片</label>
<input type="file" id="file" class="file" style="display: none;">
</body>
<script type="text/javascript">
document.getElementById('file').onchange = function() {
var imgFile = this.files[0];
var fr = new FileReader();
fr.onload = function() {
document.getElementById('imgdisplay').getElementsByTagName('img')[0].src = fr.result;
};
fr.readAsDataURL(imgFile);
};
</script>
</html>當你的鼠標點擊“點擊上傳圖片”，上傳的圖片的位置會代替以前圖片的位置
