拖拽过程详解:

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. 使用BigDecimal转换较长小数时候出现科学计数法的问题

    public static String divToString(double v1, double v2, int scale){ if (scale < 0) { throw new Ill ...

  2. IOC入门

    Spring六大模块 1.SpringCore  spring的核心功能:IOC容器,解决对象的创建及依赖关系 2.SpringWeb   spring对Web模块的支持 3.SpringDAO  s ...

  3. HttpUrlConnection的setDoOutput与setDoInput的区别

    httpUrlConnection.setDoOutput(true) httpUrlConnection.setDoInput(true) 这两个方法在develope的httpUrlConnect ...

  4. JS文件上传神器bootstrap fileinput详解

    Bootstrap FileInput插件功能如此强大,完全没有理由不去使用,但是国内很少能找到本插件完整的使用方法,于是本人去其官网翻译了一下英文说明文档放在这里供英文不好的同学勉强查阅.另外附上一 ...

  5. Java第三阶段学习（十三、会话技术、Cookie技术与Session技术）

    一.会话技术  1. 存储客户端状态 会话技术是帮助服务器记住客户端状态(区分客户端)的.  2. 会话技术 从打开一个浏览器访问某个站点,到关闭这个浏览器的整个过程,称为一次会话.会话技术就是记录这 ...

  6. 数学之美——HMM模型（二）解码和Forward算法

    上一篇讨论了HMM的基本概念和一些性质,HMM在现实中还是比较常见的,因此也带来一了一系列的HMM应用问题.HMM应用主要面向三个方面:预测.解码和学习.这篇主要讨论预测. 简单来说,预测就是给定HM ...

  7. Codeforces 584E Anton and Ira

    Anton and Ira 我们把点分为三类, 向左走的, 向右走的, 不动的. 最完美的情况就是每个点没有走反方向. 每次我们挑选最右边的向右走的去把向左走的交换过来,这样能保证最优. #inclu ...

  8. homestead实现外部局域网络其他主机的访问

    转载自:https://blog.csdn.net/u013659696/article/details/78455362 homestead 2.0 MAC环境 修改Homestead目录下的Vag ...

  9. VIM中使用S查找并替换

    vi/vim 中可以使用 :s 命令来替换字符串.以前只会使用一种格式来全文替换,今天发现该命令有很多种写法(vi 真是强大啊,还有很多需要学习),记录几种在此,方便以后查询.:s/vivian/sk ...

  10. Python3 贝叶斯分类

    # -*- coding: utf-8 -*- """ Created on Tue Jan 16 20:11:07 2018 @author: markli " ...