亚洲激情专区-91九色丨porny丨老师-久久久久久久女国产乱让韩-国产精品午夜小视频观看

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

html5實現文件上傳功能的方法

發布時間:2020-08-29 14:40:38 來源:億速云 閱讀:245 作者:小新 欄目:web開發

這篇文章將為大家詳細講解有關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實現文件上傳功能的方法

選中后

html5實現文件上傳功能的方法

關于html5實現文件上傳功能的方法就分享到這里了,希望以上內容可以對大家有一定的幫助,可以學到更多知識。如果覺得文章不錯,可以把它分享出去讓更多的人看到。

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

海淀区| 巴青县| 富阳市| 江达县| 拉孜县| 德兴市| 桦川县| 阳曲县| 廊坊市| 汉寿县| 咸宁市| 汉沽区| 中方县| 甘孜| 仙桃市| 乌鲁木齐市| 若尔盖县| 即墨市| 玛多县| 桦甸市| 枝江市| 孝义市| 郑州市| 拉萨市| 新平| 四平市| 乾安县| 鱼台县| 黄陵县| 鸡泽县| 印江| 拜城县| 洛阳市| 淮安市| 和顺县| 阿瓦提县| 黔西| 富川| 镇赉县| 宝清县| 乌苏市|