html5如何實現文件上傳功能
- 清浅原創
- 2018-11-16 12:42:0611087瀏覽
本篇文章將給大家分享一個案例，利用HTML5實現文件上傳的功能，有一定的參考價值，希望對大家有所幫助
html5新增的一些API方法使我們實現一些功能更簡單也可以實現更多的動態效果，接下來將詳細介紹檔案上傳功能的實作
案例實作所用到的知識點
（1） multiple是HTML5新增屬性主要用於多個值檔案的上傳，規定了所輸入欄位可選擇多個值，一般與input屬性中email 和file共用
（2）querySelector() 方法主要用於傳回文件中符合指定選擇器的第一個元素，如果要傳回所有的元素可用querySelectorAll() 方法替代。
（3）FileReader 物件允許應用程式非同步讀取儲存在電腦上的檔案的內容，使用 File 或 Blob 物件指定已讀取的檔案或資料。其中File物件可以是來自d5fd7aea971a85678ba271703566ebfd元素上選擇檔案後傳回的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如何實現文件上傳功能的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn