這應該可以用在圖檔上傳前的預覽上。
(註：在IE9上測試不支援，IE10看說明似乎有支援，Firefox和Chrome則都有支援)
<!DOCTYPE html >
<html>
<head>
<script>
function aa() {
var file = document.getElementById('ff').files[0];
//console.dir(file);
if (file) {
var msg = [];
msg.push('檔名：' + file.name
, '大小：' + file.size
, '檔案類型：' + file.type
, '修改日期：' + file.lastModifiedDate.toLocaleDateString()
);
document.getElementById('msg').innerHTML = msg.join("<"+"br"+">");
//讀取檔案
var fileReader = new FileReader();
fileReader.onload = function(event){//讀取完後執行的動作
//console.dir(event);
document.getElementById('xx').src = event.target.result;
};
fileReader.readAsDataURL(file);//讀取檔案內容,以DataURL格式回傳結果
//fileReader.readAsText(file, 'UTF-8');
}
}
</script>
</head>
<body>
<input type=file id="ff" onchange="aa()"/>
<div id="msg"></div>
<img id="xx" src="" />
</body>
</html>
File的屬性
- 檔名：file.name
- 大小：file.size
- 檔案類型：file.type
- 修改日期：file.lastModifiedDate
FileReader讀取檔案的方式
- readAsDataURL：讀取檔案內容,以DataURL格式回傳結果。例 readAsText(file)
- readAsText：讀取檔案內容,以文字格式回傳結果。例 readAsText(file, 'UTF-8')
- readAsBinary：讀取檔案內容,以二進位字串格式回傳結果。例 readAsText(file)
- readAsArrayBuffer：讀取檔案內容,以陣列緩衝格式回傳結果。例 readAsText(file)
HTML5 File API 讀取檔案的觸發事件(event)
沒有留言:
張貼留言