溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關html5實現文件上傳功能的方法，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
html5新增的一些API方法使我們實現一些功能更加簡便也可以實現更多的動態效果，接下來將詳細介紹文件上傳功能的實現
案例實現所用到的知識點
（1）multiple是HTML5新增屬性主要用于多個值文件的上傳，規定了所輸入字段可選擇多個值，一般與input屬性中email 和 file共用
（2）querySelector() 方法主要用于返回文檔中匹配指定選擇器的第一個元素，如果要返回所有的元素可用querySelectorAll() 方法替代。
（3）FileReader 對象允許應用程序異步讀取存儲在計算機上的文件的內容，使用 File 或 Blob 對象指定讀取的文件或數據。其中File對象可以是來自<input>元素上選擇文件后返回的FileList對象
（4）readAsDataURL：將讀取出來的圖像文件，直接顯示在網頁上，達到預覽效果
代碼展示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文件讀取</title>
<style>
.box{
width:500px;
height:500px;
border: 1px solid #ccc;
margin:300px auto;
position: relative;
background-color:rgb(167,239,251);
}
.file{
position: absolute;
bottom:0;
left:0;
}
#img{
position: absolute;
left:100px;
bottom:30px;
}
</style>
</head>
<body>
<div>
<input type="file" multiple>
<img src="" alt="" id="img">
</div>
<script>
var file = document.querySelector('.file');/*獲取到了文件表單元素*/
/*選擇文件后觸發*/
file.onchange = function () {
/*初始化了一個文件讀取對象*/
var reader = new FileReader();
/*讀取文件數據 this.files[0] 文件表單元素選擇的第一個文件 */
reader.readAsDataURL(this.files[0]);
/* 加載 */
reader.onload = function () {
/*讀取完成顯示圖片*/
console.log(this.result);
document.querySelector('#img').src = this.result;
}
}
</script>
</body>
</html>效果顯示
未選中前
選中后
關于html5實現文件上傳功能的方法就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
