<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <title>Insert title here</title>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">

    <script type="text/javascript">

    </script>

    <style type="text/css">

        .want {

            border:2px solid red;

        }

        .nowant {

            border: 1px solid black;

        }

    </style>

</head>

<body>

    <div id="fileUpload" class="nowant" style="width: 200px; height: 200px;"></div>

    <div id="test"></div>

</body>

</html>

<script type="text/javascript">

    var isUpload = false;

    window.onload = function () {

        var targer = document.getElementById("fileUpload");

        //当拖曳元素进入目标元素的时候触发的事件，此事件作用在目标元素上

        targer.ondragenter = function (e) {

            if (isUpload) return;//如果正在上传中 则不允许再放置上传

            var types = e.dataTransfer.types;//该属性返回一个DOMStringList对象，该对象包括了存入dataTransfer中数据的所有类型。

            if (types && types.some(function(v) { return v === "Files" })) {

                return false;//阻止浏览器默认操作

            }

        }

        //拖拽元素在目标元素上移动的时候触发的事件，此事件作用在目标元素上

        targer.ondragover = function (e) {

            document.getElementById("fileUpload").classList.remove("nowant");

            document.getElementById("fileUpload").classList.add("want");

            return false;//阻止浏览器默认操作

        }

        // 在可拖动的元素移出放置目标时执行 JavaScript :

        targer.ondragleave = function (e) {

            document.getElementById("fileUpload").classList.remove("want");

            document.getElementById("fileUpload").classList.add("nowant");

            return false;

        }

        //在可拖动元素放置在 <div> 元素中时执行 JavaScript:

        targer.ondrop = function (e) {

            if (isUpload) return false;//在上传的途中不允许再上传

            console.log(e.dataTransfer);//这样输出是拿不到信息的

            var files = e.dataTransfer.files;//获得 放置的文件信息

            //这个例子只允许单文件上传哟

            if (files && files.length > &&files.length==) {

                //创建xhr 使用xhr2  进行文件上传

                var xhr = new XMLHttpRequest();

                xhr.open("POST", "@Url.Action("Upload")");//设置上传方式以及处理请求地址

                var body = new FormData();//请求报文体数据存储点

                body.append("file",files[]);

                //上传进度回调

                xhr.upload.onprogress=function(e) {

                    if (e.lengthComputable) {

                        document.getElementById("test").innerHTML = (e.loaded / e.total * ) + "%";

                    }

                }

                xhr.onload=function(e) {

                    isUpload = false;//上传完成可继续拖拽上传

                }

                xhr.send(body);

                document.getElementById("fileUpload").classList.remove("want");

                document.getElementById("fileUpload").classList.add("nowant");

            }

            return false;//组织浏览器默认操作

        }

    }

</script>

主要实现步骤是利用html 几个拖拽事件

1.当文件拖动到容器时候 容器增加边框高亮样式

2.当文件拖出边框的时候 删除边框高亮样式

3.当文件放置在容器的时候 通过事件参数 获得 放置的文件信息

4.使用html5 的formdata 对象 将文件信息添加进去

5.使用XHR2 将formdata 发送到服务器处理(在此之前 同事使用xhr2 注册 上传进度回调)

html5拖拽事件 xhr2 实现文件上传 含进度条的更多相关文章

  1. atitit.文件上传带进度条的实现原理and组件选型and最佳实践总结O7

    atitit.文件上传带进度条的实现原理and组件选型and最佳实践总结O7 1. 实现原理 1 2. 大的文件上传原理::使用applet 1 3. 新的bp 2 1. 性能提升---分割小文件上传 ...

  2. atitit. 文件上传带进度条 atiUP 设计 java c# php

    atitit. 文件上传带进度条 atiUP 设计 java c# php 1. 设计要求 1 2. 原理and 架构 1 3. ui 2 4. spring mvc 2 5. springMVC.x ...

  3. HTML5 + AJAX ( jQuery版本 ) 文件上传带进度条

    页面技术:HTML5 + AJAX ( jQuery) 后台技术:Servlet 3.0 服务器:Tomcat 7.0 jQuery版本:1.9.1 Servlet 3.0 代码 package or ...

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

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

  5. Flex4/Flash多文件上传(带进度条)实例分享

    要求 必备知识 本文要求基本了解 Adobe Flex编程知识和JAVA基础知识. 开发环境 MyEclipse10/Flash Builder4.6/Flash Player11及以上 演示地址 演 ...

  6. jquery 实现拖动文件上传加进度条

    通过对文件的拖动实现文件的上传,主要用到的是HTML5的ondrop事件,上传内容通道FormData传输: //进度条 <div class="parent-dlg" &g ...

  7. struts2多文件上传(带进度条)demo+说明

    利用plupload插件实现多文件上传,实现图片: 在jsp写入js代码: z<%@ page language="java" contentType="text/ ...

  8. BootStrap Progressbar 实现大文件上传的进度条

    1.首先实现大文件上传,如果是几兆或者几十兆的文件就用基本的上传方式就可以了,但是如果是大文件上传的话最好是用分片上传的方式.我这里主要是使用在客户端进行分片读取到服务器段,然后保存,到了服务器段读取 ...

  9. Springboot 文件上传(带进度条)

    1. 相关依赖 pom.xml <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http ...

随机推荐

  1. LightGallery.js – 功能齐全的 Javascript Lightbox

    Lightgallery是一个轻量级的模块化.响应式的灯箱画廊,它允许您创建美丽的图像和视频画廊.借助缩略图插件的帮助,Lightgallery 允许您创建缩略图画廊.它支持触摸屏设备上滑动导航以及桌 ...

  2. 移动Web利器transformjs入门

    简介 在过去的两年,越来越多的同事.朋友和其他不认识的童鞋进行移动web开发的时候,都使用了transformjs,所有必要介绍一下,让更多的人受益,提高编程效率,并享受编程乐趣.(当然transfo ...

  3. JQuery使用deferreds串行多个ajax请求

    使用JQuery对多个ajax请求串行执行. HTML代码: <a href="#">Click me!</a> <div></div&g ...

  4. IOS开发基础知识--碎片50

      1:Masonry 2个或2个以上的控件等间隔排序 /** * 多个控件固定间隔的等间隔排列,变化的是控件的长度或者宽度值 * * @param axisType 轴线方向 * @param fi ...

  5. Oracle用法、函数备忘记录

    Listagg select * from emp select LISTAGG(ename,'-') within group (order by deptno desc) from emp; 可以 ...

  6. JAVA NIO Channel

    Basic:   多数通道都是链接到开发的文件描述符的.Channel类提供维持平台独立性的抽象过程.   通道是一种途径,访问和操作操作系统,缓冲区是数据操作点: Channel类继承结构图: 通过 ...

  7. Sql Server 2016新功能之 Row-Level Security

    Sql Server 2016 有一个新功能叫 Row-Level Security ,大概意思是行版本的安全策略(原来我是个英语渣_(:з」∠)_) 直接上例子.这个功能相当通过对表添加一个函数作为 ...

  8. 7、二种 为二个不同的子网配置DHCP服务器（中继代理服务器）

    环境如下:        (参考之前,保证二个子网可以互相ping通) 虚拟机vm1        192.168.170.3                    VMnet8 (NAT模式) 虚拟 ...

  9. JS--轻松设置获取表单数据

    接触过Angularjs的都知道,ng支持双向绑定,我们可以轻轻松松的通过ngModel将我们的值绑定到界面,当修改了值提交表单的时候不需要再重新通过ID去重新抓取输入框信息了.那对于我们开发前台网站 ...

  10. 让我们用心感受泛型接口的协变和抗变out和in

    关键字out和in相信大家都不陌生,系统定义的很多泛型类型大家F12都或多或少看见了.但是实际中又很少会用到,以前在红皮书里看到,两三页就介绍完了.有的概念感觉直接搬出来的,只是说这样写会怎样,并没有 ...