js图片预览带进度条
生活随笔
收集整理的這篇文章主要介紹了
js图片预览带进度条
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
progress {
width: 168px;
height: 5px;
color: #f00;
background: #EFEFF4;
border-radius: 0.1rem;
}
/* 表示總長度背景色 */
progress::-webkit-progress-bar {
background-color: #f2f2f2;
border-radius: 0.2rem;
}
/* 表示已完成進(jìn)度背景色 */
progress::-webkit-progress-value {
background: forestgreen;
border-radius: 0.2rem;
}
</style>
</head>
<body>
<input type="file" id="myFile"/>
<div id="bar">
上傳進(jìn)度:
<progress id="pro" value="0"></progress>
</div>
<div>
<img src="" alt="GG" id="myImg"/>
</div>
</body>
<script src="../js/jquery.js"></script>
<script>
var myFile = document.getElementById("myFile");
//綁定事件(ECMAScript6寫法)
myFile.addEventListener("change", () => {
var file = myFile.files[0];
//toDataURL(file);
previewWithObjectURL(file);
})
//簡單的圖片預(yù)覽建議使用第一種方式
//URL方式（第一種方式）src = blob:http://localhost:8080/f720711f-57e2-428f-8a47-ec59e5dbbc10
function previewWithObjectURL(file) {
var url = URL.createObjectURL(file);
var reader = new FileReader();
reader.readAsDataURL(file);
//請求完成后,顯示圖片
reader.onloadend = function (event) {
document.getElementById("myImg").src = url;
}
//上傳過程中動(dòng)態(tài)顯示進(jìn)度條
reader.onprogress = function (event) {
if (event.lengthComputable) {
document.getElementById("pro").value = event.loaded / event.total;
}
}
}
//DataURL（第二種方式）src = data image/jpeg;base64,/hihfejaojshf24ji3h53i
function toDataURL(file) {
var reader = new FileReader();
reader.readAsDataURL(file);
//請求完成后,顯示圖片
reader.onloadend = function (event) {
document.getElementById("myImg").src = event.target.result;
}
//上傳過程中動(dòng)態(tài)顯示進(jìn)度條
reader.onprogress = function (event) {
if (event.lengthComputable) {
document.getElementById("pro").value = event.loaded / event.total;
}
}
}
</script>
</html>
總結(jié)
以上是生活随笔為你收集整理的js图片预览带进度条的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 数据类型进阶
- 下一篇： 六招轻松搞定你的CentOS系统安全加固