文件上传笔记

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