溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇文章給大家分享的是有關怎么在JavaScript中使用 FileReader對象上傳圖片本，小編覺得挺實用的，因此分享給大家學習，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
label{display: inline-block;width:200px;height:40px;border:1px solid #ccc;}
.ob{background:#ccc;padding:10px;}
.imgbox img{height:100px;width:100px;margin:10px;}
</style>
</head>
<body>
<div class="ob" id="od" draggable="true">
<input type="file" id="file" multiple="multiple">
</div>
<div class="imgbox"></div>
<script>
//獲取文件url
function createObjectURL(blob){
if (window.URL){
return window.URL.createObjectURL(blob);
} else if (window.webkitURL){
return window.webkitURL.createObjectURL(blob);
} else {
return null;
}
}
var box = document.querySelector(".imgbox"); //顯示圖片box
var file = document.querySelector("#file"); //file對象
var domFragment = document.createDocumentFragment(); //文檔流優化多次改動dom
//觸發選中文件事件
file.onchange = function(e){
box.innerHTML =""; //清空上一次顯示圖片效果
e = e || event;
var file = this.files; //獲取選中的文件對象
for(var i = 0, len = file.length; i < len; i++){
var imgTag = document.createElement("img");
var fileName = file[i].name; //獲取當前文件的文件名
var url = createObjectURL(file[i]); //獲取當前文件對象的URL
//忽略大小寫
var jpg = (fileName.indexOf(".jpg") > -1) || (fileName.toLowerCase().indexOf(".jpg") > -1);
var png = (fileName.indexOf(".png") > -1) || (fileName.toLowerCase().indexOf(".png") > -1);
var jpeg = (fileName.indexOf(".jpeg") > -1) || (fileName.toLowerCase().indexOf(".jpeg") > -1);
//判斷文件是否是圖片類型
if(jpg || png || jpeg){
imgTag.src = url;
domFragment.appendChild(imgTag);
}else{
alert("請選擇圖片類型文件！");
}
}
//最佳顯示
box.appendChild(domFragment);
}
</script>
</body>
</html>以上就是怎么在JavaScript中使用 FileReader對象上傳圖片本，小編相信有部分知識點可能是我們日常工作會見到或用到的。希望你能通過這篇文章學到更多知識。更多詳情敬請關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
