用戶點(diǎn)擊上傳按鈕后勋锤,彈出文件選擇窗口供用戶選擇文件饭玲。之后我們可以在JavaScript代碼中使用FileReader來將文件讀取為base64格式的字符串形式進(jìn)行發(fā)送。而base64格式的文件直接可以指定為img,audio,video的src叁执,這樣就可以將圖片茄厘,音頻,視頻谈宛,用標(biāo)簽顯示在頁面了次哈,如果是其他格式的文件,可以通過將a標(biāo)簽的href屬性來鏈接文件
<input id="upload" type="file" value="file"/>
document.getElementById('upload').addEventListener('change', function() {
//檢查是否有文件被選中
if (this.files.length != 0) {
//獲取文件并用FileReader進(jìn)行讀取
var file = this.files[0],
reader = new FileReader();
if (!reader) {
console.log '對(duì)不起吆录,您的瀏覽器不支持窑滞!');
this.value = '';
return;
};
reader.onload = function(e) {
//讀取成功,顯示到頁面并發(fā)送到服務(wù)器
this.value = '';
//e.target.result為base64格式的文件
socket.emit('file', e.target.result);
};
reader.readAsDataURL(file);
};
}, false);