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