拖拽过程详解:

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. hdu 2065(泰勒展式)

    比赛的时候遇到这种题,只能怪自己高数学得不好,看着别人秒.... 由4种字母组成,A和C只能出现偶数次. 构造指数级生成函数:(1+x/1!+x^2/2!+x^3/3!……)^2*(1+x^2/2!+ ...

  2. Java中关于HashMap源码的研究

    1.基础知识 1.数组 数组存储区间是连续的,占用内存严重,故空间复杂的很大.但数组的二分查找时间复杂度小,为O(1):数组的特点是:寻址容易,插入和删除困难. 2.链表 链表存储区间离散,占用内存比 ...

  3. 神奇的Content-Type--在JSON中玩转XXE攻击

    转自:360安全播报http://bobao.360.cn/learning/detail/360.html 大家都知道,许多WEB和移动应用都依赖于Client-Server的WEB通信交互服务.而 ...

  4. [转] 使用moment.js轻松管理日期和时间

    当前时间:moment().format('YYYY-MM-DD HH:mm:ss'); 2017-03-01 16:30:12 今天是星期几:moment().format('d'); 3 Unix ...

  5. 数学之美——HMM模型（一）介绍

    一直想写点关于数学方面的blog,这对于数据挖掘分析,NLP处理等都有着比较重要的作用,之前在CSDN上想写点HMM方面的文章,一直没写成,最近几天终于抽点时间完成了HMM的文章,加以整理,遂有这个系 ...

  6. C++雾中风景10:聊聊左值，纯右值与将亡值

    C++11的版本在类型系统上下了很大的功夫,添加了诸如auto,decltype,move等新的关键词来简化代码的编写与降低阅读代码的难度.为了更好的理解这些新的语义,笔者确定通过几篇文章来简单窥探一 ...

  7. 读研 or 工作？对计算机类专业学习的看法

    先来介绍一下自己 中南大学(不知名985双一流 A 类)大二计算机专业本科生,才学编程1年多一点.大一的时候搞了大半年 ACM,现在慢慢转向项目开发(在学习 JAVA 开发,U3D 和 C#),同时在 ...

  8. JavaScript 对象Array,Map,Set使用

    for(int i = 0 :i < 3 ;i++ ){ //[重点说三遍] 在说明每个对象的用法之前,首先说明 JavaScript 对象的使用一定要注意浏览器的兼容性问题!尤其是IE的版本! ...

  9. 玩转SpringCloud（F版本） 二．服务消费者（1）ribbon+restTemplate

    上一篇博客有人问我,Springcloud系列会不会连载 ,大家可以看到我的标签分类里已经开设了SpringCloud专题,所以当然会连载啦,本人最近也是买了本书在学习SpringCloud微服务框架 ...

  10. vue-video-player的使用总结

    由于公司的项目是网上教育的,像网易云课堂那种教育网站,因而会有很多课程需要在线观看的,所以视频插件是必不可少的. 由于我用vue开发项目,所以找视频插件也找和vue贴近的.最后选择了vue-video ...