<!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. redis开启远程访问

    redis默认只允许本地访问,要使redis可以远程访问可以修改redis.conf   打开redis.conf文件在NETWORK部分有说明   ######################### ...

  2. 异常:java.lang.LinkageError: loader constraint violation: when resolving interface method

    异常:java.lang.LinkageError: loader constraint violation: when resolving interface method "javax. ...

  3. LinQ to SQL用法详解

    LinQ是指集成化查询语言,通过映射将数据库内的表名变为C#的类名,将列名作为属性名,将表的关系作为类的成员对象.O--M--R O-Object对象(李昌辉)R-Relation关系M-Mappin ...

  4. linux基础:第三关课前考试题整理

    1.如何取得/etc/hosts 文件的权限对应的数字内容,如-rw-r--r-- 为 644, 要求使用命令取得644 这样的数字. [root@server ~]# stat /etc/hosts ...

  5. 《饥荒游戏》SW BUG 刷猴子 & 刷淘气值 办法

    简介 该办法利用刷猴子的方式,通过杀猴子获取淘气值,从而刷出坎普斯,继而刷坎普斯背包 物品准备 灭火器x1 箱子x1 逗猴球x1 猴窝xN 帽贝岩x2 避雷针x1 操作步骤 1.灭火器建造在2个帽贝岩 ...

  6. php 下设置cookie问题

    在php下设置了cookie,CI下set_cookie()方式,但是发现cookie不能马上生效,需要刷新后才能获取,后来在网上找到了一个解决办法,$_COOKIE[$var] = $value:多 ...

  7. 如果layer层在iframe下不居中滚动

    需要在layer前面加上parent.layer. 2.运用layer层的步骤: 1.引入1.8版本以上的jquery文件 <script type="text/javascript& ...

  8. Collections.shuffle

    1.Collections.shuffler 最近有个需求是生成十万级至百万级的所有随机数,最简单的思路是一个个生成,生成新的时候排重,但是这样时间复杂度是o(n^2),网上看了几个博客的解决方法都不 ...

  9. LK产品如何提高通信速率

    之前做LK,由于采用自定义协议,485通信.为了避免通信撞车,采用主控轮询.从机应答的通信方式. 当设备规模扩大,需要轮询的子设备和参数变多时,轮询周期就会加长,人机交互时,系统反应缓慢. 分析主控轮 ...

  10. HDU 1564 Play a game(巴什博弈)

    New Year is Coming! ailyanlu is very happy today! and he is playing a chessboard game with 8600. The ...