html5實(shí)現(xiàn)文件上傳功能的方法

發(fā)布時間：2020-08-29 14:40:38 來源：億速云閱讀：241 作者：小新欄目：web開發(fā)

這篇文章將為大家詳細(xì)講解有關(guān)html5實(shí)現(xiàn)文件上傳功能的方法，小編覺得挺實(shí)用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

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

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

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

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

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

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

代碼展示

<!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>

效果顯示

未選中前

html5實(shí)現(xiàn)文件上傳功能的方法

選中后

html5實(shí)現(xiàn)文件上傳功能的方法

關(guān)于html5實(shí)現(xiàn)文件上傳功能的方法就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。

向AI問一下細(xì)節(jié)

html5實(shí)現(xiàn)文件上傳功能的方法

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽