logo

该视频仅会员有权观看

立即开通课程「React.js 前端应用开发实践」权限。

¥
199
/ 年

用拖放的方式选择文件

  • 用户可以通过拖放方式选择文件,将其拖放到页面指定区域。
  • POSTRT组件中,找到一个元素,使其成为可拖放区域。
  • 绑定on drag over事件到组件包装元素,设置事件处理器以禁用默认行为。
  • 绑定on drop事件,当文件被拖放并松开鼠标,该事件被触发,处理器同样禁用默认行为。
  • 通过事件获取拖放的第一个文件对象,并进行判断;如果文件对象存在,则更新文件状态,并创建图像预览。
  • 在浏览器中通过拖放图像文件到页面上测试,触发on drop事件,从而设置文件状态并创建预览图像。