2013/08/19

JavaScript 利用FileReader讀取圖片

JavaScript真是越來越強大的語言，在HTML5開放了File這個API
目前僅有Chrome以及Firefox支援，利用typeof的去取得該瀏覽器是否實做

如果實做的話，就可以利用input去選取檔案，選取完成後會觸發onchange事件
觸發的當下，就使用cfile_change()方法，透過readFileContent()將網址讀取回來
並且將圖片指定給image



<!DOCTYPE>
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>我是標題</title>
 <script type="text/javascript">
  if(typeof FileReader == 'undefined'){
        alert("瀏覽器尚未支援FileReader");
     }else{
         var file;
         var fileReader;

         function cfile_change() {
             file = document.getElementById('input').files[0];
             
             if (file) {
                 fileReader = new FileReader();
                 fileReader.onload = openfile;
                 readFileContent();
             }
         }

         function openfile(event) {
             document.getElementById('image').src = event.target.result;
             document.getElementById('text').innerHTML = document.getElementById('image').src;
         }

         function readFileContent() {
             fileReader.readAsDataURL(file);
         }

     }
 </script>
</head>
<body>
 <input type="file" id="input" value="" onchange="cfile_change()">
 <div>
  <img src="" id="image">
 </div>
 <br>
 <textarea rows="10" cols="50" id="text"></textarea>
 </body>
</html>







參考資料：
http://www.kangting.tw/2013/08/filereader.html
http://www.jsmix.com/blog/html5/file-reader.html
http://www.jsmix.com/blog/html5/html5-file-pre-test.html
http://www.w3.org/TR/FileAPI/#dfn-filereader
http://0e2.net/post/1081.html
http://www.cnblogs.com/asie-huang/archive/2012/07/10/2585038.html
http://audi.tw/blog/css/input.type=file.asp
By at
標籤: ,