JS學習--用JS讀取本地檔案
<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">最近在學習JS，學習了一下JS讀取本地檔案的額方法，總結一下做個記錄</span>-----------------------------------------------------------------------------------------------------------------------------------------------------
我寫了一個html頁面，實現了從本地讀入一個檔案，並顯示它的名字和型別資訊。如果是圖片的話，也把它畫出來
------------------------------------------------------------------------------------------------------------------------------------------------------
涉及的檔案讀取的html的標籤：
<input type="file"></span> 我們指定type屬性為"file"就可以選擇本地的一個檔案。這個input標籤加上"file"屬性對應的HTML DOM物件是FileUpload物件。關於這個物件的更詳細的教程可以參見
當我們選定一個檔案，點選一個類似於“Open”的按鈕退出對話方塊的時候，會觸發HTML的事件。一般通過onchange這個事件操作，我在firefox中試過oninput發現這個事件不能響應上述情況。所以大概的操作input標籤的流程如下：
涉及到檔案讀取的HTML DOM其他物件有，FileReader，File，FileList。Filelist就是File的列表。File常用的幾個屬性有<input id="myfile" type="file" /> <script> var file = document.getElementById("myfile"); file.onchange = function(event){ //manipulate on files, for example console.log(this.files[0]); } </script>
File.name //檔名字
File.type //檔案MIME型別
File.size //檔案大小，以位元組記在畫出讀取的影象這個階段，為了趕時髦，我用了HTML5的畫布，我是新建一個Image物件，然後直接對Image.src賦值為FileReader.result，然後就將畫布的長寬設定為影象的長寬，再畫出來。在Firefox中，這麼做畫布的長寬都是0，但是在chrome中就是正常的。不得不說chrome真是個神器啊。
最後附上html的原始碼：
<html>
<head>
<meta charset="utf-8" />
<title>File Input Test</title>
</head>
<body>
<h1>File Input Test</h1>
<input id="myinput" type="file" />
<br />
<p id="name"></p>
<br />
<canvas id="mycanvas"></canvas>
<script type="text/javascript">
var file = document.getElementById("myinput");
var canvas = document.getElementById("mycanvas");
var ctx = canvas.getContext("2d");
file.onchange = function(event){
var f = this.files[0];
document.getElementById("name").innerHTML=
"you open "+f.name+" it's type is "+f.type;
var reader = new FileReader();
reader.onload = function(event){
var bytes = this.result;
console.log(bytes);
if(!f.type.match("image.*")) return;
var image = new Image();
image.src = ""+bytes;
//in firefox, width and height of canvas is 0
//but in chrome, it's ok.
canvas.width = image.width;
canvas.height = image.height;
ctx.drawImage(image,0,0);
}
reader.readAsDataURL(f);
}
</script>
</body>
</html>