html5如何實現(xiàn)文件上傳功能

2020-03-24 18:10:19

字體：大中小

來源：轉(zhuǎn)載

供稿：網(wǎng)友

本篇文章將給大家分享一個案例，利用HTML5實現(xiàn)文件上傳的功能，有一定的參考價值，希望對大家有所幫助

html5新增的一些API方法使我們實現(xiàn)一些功能更加簡便也可以實現(xiàn)更多的動態(tài)效果，接下來將詳細介紹文件上傳功能的實現(xiàn)

案例實現(xiàn)所用到的知識點

（1）multiple是HTML5新增屬性主要用于多個值文件的上傳，規(guī)定了所輸入字段可選擇多個值，一般與input屬性中email 和 file共用

（2）querySelector() 方法主要用于返回文檔中匹配指定選擇器的第一個元素，如果要返回所有的元素可用querySelectorAll() 方法替代。

（3）FileReader 對象允許應用程序異步讀取存儲在計算機上的文件的內(nèi)容，使用 File 或 Blob 對象指定讀取的文件或數(shù)據(jù)。其中File對象可以是來自<input>元素上選擇文件后返回的FileList對象

（4）readAsDataURL：將讀取出來的圖像文件，直接顯示在網(wǎng)頁上，達到預覽效果

代碼展示

<!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');/*獲取到了文件表單元素*//*選擇文件后觸發(fā)*/file.onchange = function () {/*初始化了一個文件讀取對象*/var reader = new FileReader();/*讀取文件數(shù)據(jù)  this.files[0] 文件表單元素選擇的第一個文件 */reader.readAsDataURL(this.files[0]);/* 加載 */reader.onload = function () {    /*讀取完成顯示圖片*/    console.log(this.result);document.querySelector('#img').src = this.result;}}</script></body></html>

效果顯示

未選中前

Image 6.jpg