HTML5 表單元件：client端客戶端電腦，開啟圖片檔案

(1).開啟檔案元件

<input id="file01" type="file" onchange="show03(this)"/>

(2).取得檔案參數

filename = thisfileinfo.files[0].name;
filesize= thisfileinfo.files[0].size;
filetype= thisfileinfo.files[0].type;
注意：可以複選

(3).讀取純文字檔的內容

function show02(fileinfo) {
file = fileinfo.files[0];
var fReader = new FileReader();
fReader.onload = function (event) {
document.getElementById('txt01').value = event.target.result;
};
fReader.readAsText(file);
}

(4).讀取圖片檔的內容

var file;
var fileReader;
function show03(fileinfo) {
file = fileinfo.files[0];
if (file) {
fileReader = new FileReader();
fileReader.onload = openfile;
readFileContent() ;
}
}
function openfile(event) {
document.getElementById('img01').src = event.target.result;
}
function readFileContent() {
fileReader.readAsDataURL(file);
}