易用性对于网站来说非常重要。就拿上传文件这个场景来说。如果只是点击上传那么只能说是标准流程,应该增加拖拽和粘贴上传。
点击我清楚
input=type=file
onchange
粘贴上传的原理
只要知道有这个事件,然后和这个事件的处理流程来就就可以了。只要知道有这个事件,然后和这个事件的处理流程来就就可以了,那么细节后面再说。
我之所以经常用到粘贴,是因为有时候截图。不会存到本地,而是在粘贴板上
相较于拖拽上传,粘贴上传所需要的代码更少。
监听paste事件
event.clipboardData
event.clipboardData.files :仅包含从文件系统复制的文件
clipboardData.items:包含剪贴板里的所有内容(文件、文本、截图等)
拖拽上传的原理
HTML5 Drag and Drop API
这里涉及到一些事件,不需要死记硬背,先混个脸熟。
此元素设置了 draggable=“true” 属性,使其可以被拖动。
dragstart - 当用户开始拖动元素时触发
drag - 在元素被拖动期间持续触发
dragend - 当拖动操作结束时触发(释放鼠标或按ESC键)
dragenter - 当被拖动的元素进入有效的放置目标时触发
dragover - 当被拖动的元素在放置目标上方时持续触发
dragleave - 当被拖动的元素离开放置目标时触发
drop - 当在有效的放置目标上释放被拖动的元素时触发

经典电视剧【小李飞刀】片头曲《小李飞刀》难得一身好本领 情关始终闯不过!
难得一生好本领
情关始终闯不过
闯不过柔情蜜意
乱挥刀剑无结果
流水滔滔斩不断
情丝百结冲不破
刀锋冷热情未冷
心底更是难过
853

被折叠的 条评论
为什么被折叠?



