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.readAsXXXreadAsText 文本 readAsDataURL 圖片(以及其他二進制數據) readAsBinaryString 以字符串形式存儲的二進制數據 readAsArrayBuffer 以二進制數據的形式存儲數據--------------------------------------------------------------------------------傳輸數據： 1.直接二進制 2.base64base64：可以把二進制數據表現成字符串只要能出現地址(src)的地方，都能用Base64base64的小應用——小圖標不要引用地址，直接放個base64——優化網絡性能 缺點： 1.維護麻煩 2.base64編碼會把文件體積變大--------------------------------------------------------------------------------HTML5 1.CSS3動畫 2.CSS3高級應用 3.video 4.canvas 5.touch 6.移動布局、自適應、響應式indexedDB/WebSQL已經正式被W3C移除了【鼓掌】--------------------------------------------------------------------------------SVG/VML

?

轉載于:https://www.cnblogs.com/hss-blog/p/9770486.html

《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的文件上传笔记的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。