下面範例示範上傳圖片預覽功能。圖片的選擇，除了可以使用檔案上傳控制項選擇圖片，也可以直接把圖片拖放到虛線框中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Read Image</title>
<style>
#dropBox {
margin: 15px;
width: 250px;
height: 250px;
border: 5px dashed gray;
border-radius: 8px;
background: lightyellow;
background-size: 100%;
background-repeat: no-repeat;
text-align: center;
}
#dropBox div {
margin: 75px 45px;
color: orange;
font-size: 25px;
font-family: Verdana, Arial, sans-serif;
}
input {
margin: 15px;
}
</style>
<script>
var dropBox;
window.onload = function() {
dropBox = document.getElementById("dropBox");
dropBox.ondragenter = ignoreDrag;
dropBox.ondragover = ignoreDrag;
dropBox.ondrop = drop;
}
function ignoreDrag(e) {
//因為我們在處理拖放，所以應該確保沒有其他元素會取得這個事件
e.stopPropagation();
e.preventDefault();
}
function drop(e) {
//取消事件傳播及預設行為
e.stopPropagation();
e.preventDefault();
//取得拖進來的檔案
var data = e.dataTransfer;
var files = data.files;
//將其傳給真正的處理檔案的函數
processFiles(files);
}
function processFiles(files) {
var file = files[0];
var output = document.getElementById("fileOutput");
//建立FileReader
var reader = new FileReader();
//告訴它在準備好資料之後做什麼
reader.onload = function (e) {
//使用映像URL來繪製dropBox的背景
dropBox.style.backgroundImage = "url('" + e.target.result + "')";
};
//讀取圖片
reader.readAsDataURL(file);
}
function showFileInput() {
var fileInput = document.getElementById("fileInput");
fileInput.click();
}
</script>
</head>
<body>
<div id="dropBox">
<div>將圖片拖放到此處...</div>
</div>
<input id="fileInput" type="file" onchange="processFiles(this.files)">
<img id="thumbnail">
</body>
</html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
