文件上傳筆記

FormData——文件

1.文件上傳——進度
oAjax.upload.onprogress=function (ev){
  ev.loaded       完成
  ev.total        總共

  ev.loaded/ev.total      =>0~1
};

--------------------------------------------------------------------------------

1.upload必須放在send前面
2.之前的上傳——POST
  加了upload——OPTIONS、POST

--------------------------------------------------------------------------------

1.upload必須放在send前面
2.服務器必須能處理OPTIONS
  通用服務器——不用擔憂
  NodeJS服務——use

--------------------------------------------------------------------------------

oAjax.onprogress            下載進度
oAjax.upload.onprogress     上傳進度

--------------------------------------------------------------------------------

2.拖拽上傳
ondragenter
ondragleave
ondragover          必須阻止，不然ondrop廢了
ondrop              阻止

--------------------------------------------------------------------------------

拖拽->上傳            簡單
  ev.dataTransfer.files -> FormData

拖拽->讀取文件內容     麻煩
  FileReader

--------------------------------------------------------------------------------

oForm.onsubmit=function (){
  return false;
};

oForm.addEventListener('submit', function (ev){
  ev.preventDefault();
}, false);

--------------------------------------------------------------------------------

圖片
1.上傳
2.顯示
3.留下一部分->存到數據庫裏

--------------------------------------------------------------------------------

方法1.先別上傳，完全挑選完了再上傳      節約資源-√
方法2.真的上傳，等用戶再刪             保險一些(萬一用戶斷網了)

--------------------------------------------------------------------------------

FileReader用法：
let reader=new FileReader();

reader.onload=function (){
  reader.result
};

reader.readAsXXX


readAsText              文本
readAsDataURL           圖片(以及其餘二進制數據)
readAsBinaryString      以字符串形式存儲的二進制數據
readAsArrayBuffer       以二進制數據的形式存儲數據

--------------------------------------------------------------------------------

傳輸數據：
1.直接二進制
2.base64

base64：能夠把二進制數據表現成字符串

只要能出現地址(src)的地方，都能用Base64

base64的小應用——小圖標不要引用地址，直接放個base64——優化網絡性能
缺點：
1.維護麻煩
2.base64編碼會把文件體積變大

--------------------------------------------------------------------------------

HTML5
1.CSS3動畫
2.CSS3高級應用
3.video
4.canvas
5.touch
6.移動佈局、自適應、響應式

indexedDB/WebSQL已經正式被W3C移除了【鼓掌】

--------------------------------------------------------------------------------

SVG/VML