程式碼：
<!DOCTYPE html>
<html lang=zh-Hant>
<head>
<title>preview picture with no bootstrap no jQuery</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<style>
#OriginInput{
border:1px solid red;
height:30px;
opacity:100; /* 必須為 0，覆蓋的「綠色圖片按鈕」才有作用 */
width:90px;
cursor:pointer;
}
#click_me{/*這是圖片,來當覆蓋按鈕*/
margin-top:0px;
margin-left:-60px;
opacity:100; /* 0:不顯示 */
/* cursor:pointer; 没作用，被 #OriginInput 強制取代 */
}
</style>
<body>
(1) 三種方式取得上傳圖片資料：二進位碼字串、UTF-8字串、Base64編碼字串。<br />
(2) 上傳圖檔絕對路徑不正確，基本是瀏覽器之安全設定問題<br />
(3) 綠色圖片游標變手型時，點按可上傳圖檔 但CSS要先設定 OriginInput.opacity = 0<br />
(4) 預覽圖片可依需求動態調整大小<br />
(5) 本程式已有多檔上傳功能，略改寫就能達到<br />
<br />
<div id="result" style="border:1px solid red;">測試結果區</div>
<form action="後台程式名.php" method="post" enctype="multipart/form-data">
<input id="PretendInput" type="text" readonly >
<input id="OriginInput" type="file" multiple accept="image/gif, image/jpeg, image/png" onchange="setFilePath()" >
<img id="click_me" src="https://via.placeholder.com/100x35/00FF00/" ><br />
</form>
</body>
<script>
function setFilePath(){
//--- 取得單一檔案路徑 + 檔名 - 第1種正確 =>
var oOriginInput=document.getElementById("OriginInput");
var oFiles=document.getElementById("OriginInput").files[0];
if(oFiles && oFiles.name.trim().length > 4){
let reader = new FileReader();
/*
//-- 開始：用二進位字串顯示圖片資料 (讀出圖片16進位資料)
reader.readAsBinaryString(oFiles);
reader.onload = function(e) {
let vData = e.target.result;
document.getElementById("result").innerHTML = null;
document.getElementById("result").innerHTML = vData;
};
//-- 結束
*/
/*
//-- 開始：用UTF-8字串顯示圖片資料 (讀出圖片16進位資料，呈現很多都無字型碼)
reader.readAsText(oFiles,'UTF-8');
reader.onload = function (e) {
let vData = e.target.result;
document.getElementById("result").innerHTML = null;
document.getElementById("result").innerHTML = vData;
};
//-- 結束
*/
//-- 開始：解譯Base64編碼，直接預覽圖片 (讀出圖片16進位資料)
reader.readAsDataURL(oFiles);
reader.onload = function (e) {
let vData = e.target.result;
//let vData = document.getElementById("OriginInput").result; <= 錯誤語法
//說明：(1) e.target == document.getElementById("OriginInput"), 但是 input
// 没有 result 屬性。
// (2) 判斷 e.target 應該是最早取得結果值的物件，而 OriginInput 則是較後期才
// 取得上傳的資料（或由e.target 把部份值塞給 OriginInput 的屬性變數)。
//塞入完整「檔案路徑 + 檔名」
document.getElementById("PretendInput").value=oOriginInput.value;
//預覽檔名
document.getElementById("result").innerHTML =null;
document.getElementById("result").innerHTML =oFiles.name + " <br /> ";
//預覽圖片 (以下這段程式中的 vData 資料不是字串，是base64之圖片編碼)
document.getElementById("result").innerHTML += "<img src='" + vData + "' style='width:120px;height:120px;' alt='" + oFiles.name + "' />";
};
//-- 結束
}else{
document.getElementById("PretendInput").value="";
}
/*
//--- 第2種 -- 取得單一「檔案路徑 + 檔名」之結果不正確 => C:\fakepath\sa.png
var oFilePath=document.getElementById("OriginInput");
if(oFilePath.value.trim().length > 0){
document.getElementById("PretendInput").value=oFilePath.value;
alert("取得檔案路徑及檔名：" + oFilePath.value);
}else{
document.getElementById("PretendInput").value="";
}
*/
/*
//--- 取得檔案名稱(適合多檔上傳架構)
var oFiles=document.getElementById("OriginInput").files;
var j=oFiles.length;
//console.log("共 " + j + " 個檔名");
for(let i=0;i<j;i++){
if (oFiles[i]){
//alert("取得第 " + parseInt(i+1) + " 個檔名：" + oFiles[i].name.trim());
//以下三個有反應
console.log("取得第 " + parseInt(i+1) + " 個 name：" + oFiles[i].name.trim());
console.log("取得第 " + parseInt(i+1) + " 個 type：" + oFiles[i].type.trim());
console.log("取得第 " + parseInt(i+1) + " 個 size：" + oFiles[i].size);
//以下二個 undefined
console.log("取得第 " + parseInt(i+1) + " 個 tmp_name：" + oFiles[i].tmp_name);
console.log("取得第 " + parseInt(i+1) + " 個 error：" + oFiles[i].error);
}
}
*/
/*
//--- 取得檔案名稱(適合單檔上傳架構)
var oFiles=document.getElementById("OriginInput").files;
//if(oFiles && oFiles.length>0 && sFileName.length > 0){
if(oFiles){
let sFileName=oFiles[0].name.trim();
document.getElementById("PretendInput").value=sFileName;
alert("取得檔案名稱：" + sFileName);
}else{//清空檔名
document.getElementById("PretendInput").value="";
}
*/
}
</script>
</html>
