AJAX 上传图片
既然已经获取到拖拽到web页面中的图片数据了 ， 下一步就是将其发送到服务器端 。
总结
- 监听拖拽: 监听页面元素的拖拽事件 ， 包括: dragenter、dragover、dragleave 和drop,一定要将dragover的默认事件取消掉 ， 不然无法触发drop事件 。如需拖拽页面里面的元素 ， 需要给其添加属性draggable="true"
- 获取拖拽文件: 在 drop 事件触发后通过e.dataTransfer.files获取拖拽文件列表 ， 一定要将drop的默认事件取消掉 ， 否则会默认打开文件length属性获取文件数量 ， type属性获取文件类型
- 读取图片数据并添加预览图: 实例化FileReader对象 ， 通过其readAsDataURL(file)方法获取文件二进制流 ， 并监听其onload事件 ， 将e.result赋值给img的src属性 ， 最后将图片添加到DOM中
- 发送图片数据
推荐阅读
- Windows|Win11能原生双系统了：Windows 365云电脑实现深度集成
- 十张图带你了解大型网站架构
- 大型网站架构设计与方法总结
- phpStudy V8.0建立网站的方法及图文教程
- WordPress 网站地图 sitemap.xml 纯代码设置方法「亲测有效」
- Java基于Solr海量数据搜索，搜索引擎的实现
- 纯JavaScript实现的调用设备摄像头并拍照的功能
- 比1688还暴利的37个货源网站 暴利产品代发货平台
- python脚本实现音频m4a格式转成MP3格式
- 优化WordPress网站的三个方法