分类导航

HTML5 发布时间：2022-04-25 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了拖拽上传详解(HTML5 Drag&Drop、FileReader API、formdata)，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

原文：http://blog.bingo929.com/renren-drag-drop-photo-filereader-formdata.html

　　关于这个拖拽上传，其实国外有很多网站已经有这样的应用，最早推出拖拽上传应用的是Gmail，它支持标准浏览器下拖拽本地文件到浏览器中作为邮件的附件发送。人人网的这个拖拽上传也是同理，可以让使用标准浏览器的用户通过简单的拖拽行为，将本地文件夹中的照片直接上传到人人网，用户体验能得到提升的同时，也希望借此机会推广一下标准浏览器，淘汰IE。人人网当时也向广大用户推出升级浏览器活动，并喊出口号：”工欲善其计算机，必先利其浏览器”。本次拖拽上传的宣传口号：你敢”脱”，我就敢上传…

　　言归正题，首先看看效果，大家如果有人人网帐号的话可以在首页试一试拖拽上传功能，下面是演示视频：

拖拽上传应用主要使用了以下HTML5技术：

Drag&Drop : HTML5基于拖拽的事件机制.
File API : 可以很方便的让Web应用访问文件对象，File API包括 FileList、Blob、File、FileReader、URI scheme，本文主要讲解拖拽上传中用到的FileList和FileReader接口。
FormData : FormData是基于XMLHttpRequest Level 2的新接口，可以方便web应用模拟Form表单数据，最重要的是它支持文件的二进制流数据，这样我们就能够通过它来实现AJAX向后端发送文件数据了。

HTML5 Drag&drop 拖拽事件

　　关于Drag&drop拖拽事件，之前我写过一篇专门介绍的文章《给力的 Google HTML5 训练营(HTML5 Drag&Drop 拖拽、FileReader实例教程)》，那篇文章详细讲解了Drag & Drap事件的原理和代码实例，这里的拖拽上传实现原理基本上是一样的，大家有兴趣或不太了解的话可以先看看那篇文章，我在这里就不再过多啰嗦了~下面直接出拖拽上传简要代码实例：

 
  var oDragWrap  
  = document. 
  body 
  ; 
  

//拖进 
  
 oDragWrap. 
  addEventListener 
  ( 
  'dragenter' 
  ,  
  function 
  (e 
  )  
  { 
  
 　e. 
  preventDefault 
  ( 
  ) 
  ; 
  
} 
  ,105)">false 
  ) 
  ; 
  

//拖离 
  
 oDragWrap. 
  'dragleave' 
  ,105)">function 
  (e 
  )  
  { 
  
 　dragleaveHandler 
  (e 
  ) 
  ; 
  
} 
  ,96)">//拖来拖去,一定要注意dragover事件一定要清除默认事件 
  
//不然会无法触发后面的drop事件 
  
 oDragWrap. 
  'dragover' 
  ,96)">//扔 
  
 oDragWrap. 
  'drop' 
  ,105)">function 
  (e 
  )  
  { 
  
 　dropHandler 
  (e 
  ) 
  ; 
  
} 
  ,105)">false 
  ) 
  ; 
  

var dropHandler  
  =  
  function 
  (e 
  )  
  { 
  
//将本地图片拖拽到页面中后要进行的处理都在这 
  
} 
 

获取 文件数据 HTML5 File API

　　在之前那篇文章中我也有介绍过关于File API中的FileReader接口，作为 File API 的一部分，FileReader专门用于读取文件，根据 W3C 的定义，FileReader 接口 “提供一些读取文件的方法与一个包含读取结果的事件模型”。关于FileReader的详细介绍和代码实例大家可以先去看看那篇文章。

　　今天我着重介绍一下File API中的FileList接口,它主要通过两个途径获取本地文件列表，一是<input type=”file”>的表单形式，另一种则是e.dataTransfer.files拖拽事件传递的文件信息。很显然，我们这里会用到后者。

var fileList = e. dataTransfer. files ;

　　使用files方法将会获取到拖拽文件的数组形势的数据，每个文件占用一个数组的索引，如果该索引不存在文件数据，将返回null值。可以通过length属性获取文件数量.

var fileNum = fileList. length ;

大佬总结

以上是大佬教程为你收集整理的拖拽上传详解(HTML5 Drag&Drop、FileReader API、formdata)全部内容，希望文章能够帮你解决拖拽上传详解(HTML5 Drag&Drop、FileReader API、formdata)所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。

标签：5 api drag drag&drop drop filereader html html5 上传拖拽详解

上一篇: html5全解析下一篇:HTML5 APP----2014年H5没火，why...

猜你在找的HTML5相关文章

详解HTML5表单新增属性 2019-10-08
详解HTML5通讯录获取指定多个人的信息 2019-10-08
html5+css如何实现中间大两头小的轮播效果 2019-10-08
Html5 Canvas动画基础碰撞检测的实现 2019-10-08
使用HTML5捕捉音频与视频信息概述及实例 2019-10-08
详解HTML5中的<template>标签 2019-10-08
HTML5 Canvas实现玫瑰曲线和心形图案的代码实例 2019-10-08
HTML5应用之文件上传 2019-10-08
详解HTML5 LocalStorage 本地存储 2019-10-08
MPMoviePlayerController错误_itemFailedToPlayToEnd同时播放YouTube视频iOS 7 2022-04-27