拖拽过程详解:

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. LeetCode（13）：罗马数字转整数

    Easy! 题目描述: 罗马数字包含以下七种字符:I, V, X, L,C,D 和 M. 字符 数值 I 1 V 5 X 10 L 50 C 100 D 500 M 1000 例如, 罗马数字 2 写 ...

  2. wpf image 指定Stretch="None" 不拉伸的时候，仍然拉伸的解决办法

    I think TI82 is right on this issue. The image become bigger than you expect because its dpi doesn't ...

  3. final修饰的地址不能被修改

    package final0; /* * 顾客 */public class Customer { // 属性 String name; int age; // 父类object的方法 public ...

  4. fiddler抓https 关于证书一项

    由于我之前电脑装过fiddler然后这次弄证书也没有理解明白,导致失败了.然后就百度到了下面的教程. https://www.cnblogs.com/joshua317/p/8670923.html ...

  5. 【LOJ】#2075. 「JSOI2016」位运算

    题解 压的状态是一个二进制位,我们规定1到n的数字互不相同是从小到大,二进制位记录的是每一位和后一个数是否相等,第n位记录第n个数和原串是否相等,处理出50个转移矩阵然后相乘,再快速幂即可 代码 #i ...

  6. Codeforces 336D Dima and Trap Graph 并查集

    Dima and Trap Graph 枚举区间的左端点, 然后那些左端点比枚举的左端点小的都按右端点排序然后并查集去check #include<bits/stdc++.h> #defi ...

  7. 常用工具(Windows版本)

    为原有版本修改为markdown后的更新,这个编辑器真心不错,只需要把原来喜欢的表格改成列表即可. 代码工具 代码管理工具 SourceTree:支持windows和mac跨平台使用的git图形化客户 ...

  8. Java 内存模型 ，一篇就够了！

    Java 虚拟机   我们都知道 Java 语言的可以跨平台的,这其中的核心是因为存在 Java 虚拟机这个玩意.虚拟机,顾名思义就是虚拟的机器,这不是真实存在的硬件,但是却可以和不同的底层平台进行交 ...

  9. bzoj1503 郁闷的出纳员

    Description OIER公司是一家大型专业化软件公司,有着数以万计的员工.作为一名出纳员,我的任务之一便是统计每位员工的 工资.这本来是一份不错的工作,但是令人郁闷的是,我们的老板反复无常,经 ...

  10. hdu 5826 physics 物理题

    physics 题目连接: http://acm.hdu.edu.cn/showproblem.php?pid=5826 Description There are n balls on a smoo ...