好癢的學習筆記: [JavaScript]使用html input上傳圖片並轉換base64 String顯示

2015年9月17日星期四

最近想擴充Node.js聊天室，第一個想到的就是加上傳送圖片功能，這邊就記錄一下如何利用html的input tag來上傳圖片，並將圖片轉換成base64 String的格式來傳送，甚至是存入資料庫中。

以下是一個簡單範例，選擇一個圖檔後，將圖檔顯示在頁面上：

程式碼如下：

<head>
  picture upload
  
</head>
<body>
  
  
  
</body>

在這個範例中，利用input tag來讀取檔案，並用accept的屬性來限制選擇的檔案只能是圖片檔。

而在javaScript中，利用FileReader來讀取檔案。

有趣的是，當資料讀取後的結果瀏覽器就已經將資料轉換為base64的格式了。

而且img tag也認得這樣格式的資料，一切就是這麼簡單！

Howard聊天室新增功能囉！！！哈哈哈！！！
http://howard10335.blogspot.tw/2015/07/nodejssocketio.html

好癢的學習筆記