文件尚未上傳至服務器 直接複製到本地即可直接上傳並預覽
<!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>
</head>
<body>
<input type='file' id="up" accept='image/*' onchange='openFile(event)'>
<br>
<img id='output'>
<script>
var openFile = function (event) {
var input = event.target;
var reader = new FileReader();
reader.onload = function () {
var dataURL = reader.result;
var output = document.getElementById('output');
var up = document.getElementById('up');
up.style.display = 'none';
output.src = dataURL;
};
reader.readAsDataURL(input.files[0]);
};
</script>
</body>
</html
上傳後點擊預覽
<html>
<head>
<meta charset="UTF-8">
<title>通過filereader接口讀取文件</title>
<script type="text/javascript">
function readPic() {
if (typeof FileReader == 'undifined')
{
result.innerHTML = "<p>抱歉，你的瀏覽器不支持 FileReader</p>";
return false;
}
var file = document.getElementById("imagefile").files[0];
if (!/image\/\w+/.test(file.type))
{
alert("請確保文件爲圖像文件");
return false;
}
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function (e) {
var picDiv = document.getElementById("picDiv");
picDiv.innerHTML = '<img src="' + this.result + '" alt="剛剛上傳的圖片"/>'
}
}
</script>
</head>
<body>
<p>
<label>請選擇一個文件：</label>
<input type="file" id="imagefile" />
<input type="button" value="讀取圖像" onClick="readPic();" />
</p>
<div name="upPic" id="picDiv">
</div>
</body>
</html>
