拖拽过程详解:

1：文件未拖出文件选择框的时候提示：将要上传的文件或文件夹拖拽至此区域

2：文件拖出文件选择框但未拖入上传的文件框提示：请继续拖拽文件或文件夹至此区域

3：文件拖出文件选择框且已拖入上传的文件框提示：文件已拖拽到上传区域内请释放鼠标

先看一下QQ邮箱的(至少比国内好多网站作得好了)：

如果用户在上面的区域释放鼠标文件可以成功上传

但如果用户在下面区域虽然也提示了释放鼠标但文件不能成功上传....

我们来看看某宝的(直接不支持拖拽,人家就是牛)....

我们再来看看百度的(直接没有任何提示)...

这是我们的：

2017-06-27更新不同状态的背景提示：

请继续拖拽文件或文件夹至此区域

2017-11-05 改进效果：

HTML5文件上传qq、百度、taobao等比较(改进支持三种状态提示)的更多相关文章

  1. 基于HT for Web矢量实现HTML5文件上传进度条

    在HTML中,在文件上传的过程中,很多情况都是没有任何的提示,这在体验上很不好,用户都不知道到时有没有在上传.上传成功了没有,所以今天给大家介绍的内容是通过HT for Web矢量来实现HTML5文件 ...

  2. HTML5文件上传还有进度条

    以下是自学it网--中级班上课笔记 网址:www.zixue.it 需要在chrome,ff,IE10下运行 html页面 <!DOCTYPE html> <html lang=&q ...

  3. 打造 html5 文件上传组件，实现进度显示及拖拽上传，支持秒传+分片上传+断点续传，兼容IE6+及其它标准浏览器

    老早就注册了博客园帐号,昨天才发现,连博客都没开,Github也是一样,深觉惭愧,赶紧潜个水压压惊`(*∩_∩*)′ 言归正传.大概许多人都会用到文件上传的功能,上传的库貌似也不少,比如(jQuery ...

  4. AJAX文件上传实践与分析，带HTML5文件上传API。

    对于HTML5已经支持AJAX文件上传了,但如果需要兼容的话还是得用一点小技巧的,HTML5等等介绍,先来看看以前我们是怎么写的. 网上可能会有一些叫AJAX文件上传插件,但在AJAX2.0之前是不可 ...

  5. html5文件上传

    <!DOCTYPE html><html><head> <title>Html5 Ajax 上传文件</title></head> ...

  6. php html5 文件上传 (原创)

    今天自己写了一个HTML5+FileReader+php 的文件上传,ajax异步上传也支持 git 下载:git clone https://github.com/jiechengyang/HTML ...

  7. HTML5 : 文件上传下载

    网站建设中,文件上传与下载在所难免,HTML5中提供的API在前端有着丰富的应用,完美的解决了各个浏览器的兼容性问题,所以赶紧get吧! FileList 对象和 file 对象 HTML 中的 in ...

  8. html5文件上传断点续传

    最近公司要做一个html5上传的jquery插件,要在下先实现功能,要求显示上传进度,文件信息,断点续传等等.我一看,艾玛!Σ(ﾟдﾟlll),没做过啊.没办法,(# ﾟДﾟ),只能去查资料了.作为一 ...

  9. HTML5 文件上传

    这篇随笔主要引用https://juejin.im/post/59598ecf5188250d8d141fff,只用于自己学习,不对外宣传. FileList 对象和 file 对象 input[ty ...

随机推荐

  1. 安装Xampp-配置appche，mysql运行环境遇到的坑（转）

    用php编写的web应用程序,需运行在php的web容器中,其中apache server是一个针对php web容器,它是apache下的开源项目.通常要运行一个web程序,我们还需要安装数据库软件 ...

  2. poj 3468 线段树 成段增减 区间求和

    题意:Q是询问区间和,C是在区间内每个节点加上一个值 Sample Input 10 51 2 3 4 5 6 7 8 9 10Q 4 4Q 1 10Q 2 4C 3 6 3Q 2 4Sample O ...

  3. (转载）How browsers work--Behind the scenes of modern web browsers （前端必读）

    浏览器可以被认为是使用最广泛的软件,本文将介绍浏览器的工 作原理,我们将看到,从你在地址栏输入google.com到你看到google主页过程中都发生了什么. 将讨论的浏览器 今天,有五种主流浏览器— ...

  4. bzoj 1179

    题意:给你一个有向图,每个点有一个权值,有一个起点和q个终点,没经过一个点加上这个点的权值,让你选一条路,问你最大值是多少. 思路:tarjan强连通缩个点, 然后在拓扑图上dp一下就好啦, 注意第二 ...

  5. NAT虚拟网络配置

     NAT虚拟网络配置(Linux能上网) 1.先设置虚拟机的虚拟网络,设置里面的子网ip和网关ip地址: 有两种方式:①setup命令(不选DHCP,因为它是动态分配IP地址的) ②vi /etc/s ...

  6. 【Java】 大话数据结构(7) 循环队列和链队列

    本文根据<大话数据结构>一书,实现了Java版的循环队列.链队列. 队列:只允许在一端进行插入操作,而在另一端进行删除操作的线性表. 1.循环队列 队列的顺序储存结构:用数组存储队列,引入 ...

  7. 005.KVM日常管理2-virt管理

    一 安装管理工具 [root@kvm-host ~]# rpm -qa|grep libguestfs-tools #查看相关管理工具,若没安装,可使用yum安装.   二 日常管理 2.1 命令格式 ...

  8. java的线程安全、单例模式、JVM内存结构等知识学习和整理

    知其然,不知其所以然 !在技术的海洋里,前路漫漫,我一直在迷失着自我. 欢迎访问我的csdn博客,我们一同成长! "不管做什么,只要坚持下去就会看到不一样!在路上,不卑不亢!" 博 ...

  9. Java8 Lambda 之 Collection Stream

    Lambda 之 Collection Stream Collection.stream() 测试实体类 class Demo { private Long id; private String na ...

  10. odoo导入功能二开

    原来有的导入功能相信很多小伙伴对其功能不是很满意,不过没关系,我们可以二开啊,把它的功能改造成你想要的样子,接下来让我们看看怎么办吧 例如我想把员工导入功能中添加上用户同步注册功能 首先,我要找到原模 ...