使用html5的fileReader api

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 700px;
height: 300px;
border:4px dashed #ccc;
background: #fff;
margin:50px auto;
font:60px/300px "微软雅黑";
background-size: 100px 100px;
background-position: center;
background-repeat: no-repeat;
text-align: center;
}
ul{

list-style: none;
}
ul li{
background:#fff;
width: 350px;
height: 150px;
float:left;
}
ul li video{
display:block;
margin:0 auto;
width: 350px;
height: 150px;

}
</style>
</head>
<body>
<div>

<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script>
var div = document.getElementsByTagName("div")[0];
var ul = document.getElementsByTagName("ul")[0];
var lis = document.getElementsByTagName("li");
div.ondragenter= function () {
// div.innerHTML = "释放鼠标完成文件上传";
}
//当被拖动元素离开div，显示拖动文件进行上传
div.ondragleave= function () {
// div.innerHTML = "拖动文件进行上传";
}
//为了让drop事件发生，必须阻止ondragover的默认事件
div.ondragover=function(e){
var e = e||window.event;
e.preventDefault();
}
//文件拖动到浏览器，默认以超链接形式打开文件，因此要阻止浏览器默认事件
div.ondrop = function(e){

var e = e||window.event;
e.preventDefault();
var files = e.dataTransfer.files;
if(files.length>lis.lenght){
alert("文件数量超出最大上传数量");
return;
}
var frs=[];
for(var i=0;i<files.length;i++){
frs[i] = new FileReader();//FileReader接口提供了一个异步API，使用该API可以在浏览器主线程中异步访问文件系统，读取文件中的数据
frs[i].index=i;
frs[i].readAsDataURL(files[i]);//以dataurl形式读入视频
frs[i].onloadend=function(){
ul.style.display="block";
var video = document.createElement("video");
video.autoplay = true;
video.src = this.result;//设定src
lis[this.index].appendChild(video);

}
}
}
</script>
</body>
</html>

学习一下FileReader API

结果如下：

html5拖动文件上传的更多相关文章

  1. HTML5多文件上传

    文章转载自:http://xiechengxiong.com/288.html 一个简单的HTML5多文件上传demo. 以前我们上传文件的时候,如果通过js上传,我们无法在本地直接预览图片,还得跑到 ...

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

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

  3. MVC5：使用Ajax和HTML5实现文件上传功能

    引言 在实际编程中,经常遇到实现文件上传并显示上传进度的功能,基于此目的,本文就为大家介绍不使用flash 或任何上传文件的插件来实现带有进度显示的文件上传功能. 基本功能:实现带有进度条的文件上传功 ...

  4. html5 ajax 文件上传

    http://html5demos.com/dnd-upload 看这个例子看了一会儿...这个是支持拖拽的上传. 下面代码是一个简单的ajax的文件上传: function match(url,rs ...

  5. 关于 HTML5 的文件上传处理，兼容性问题，以及 BLOB 对象的使用 （转载）

    研究过程中关于本主体的相关参考 好文:https://hacks.mozilla.org/2011/01/how-to-develop-a-html5-image-uploader/ 好文:http: ...

  6. 前端开发之旅- 移动端HTML5实现文件上传

    一. 在一个客户的webapp项目中需要用到 html5调用手机摄像头,找了很多资料,大都是 js调用api  然后怎样怎样,做了几个demo测试发现根本不行, 后来恍然大悟,用html5自带的 in ...

  7. HTML5 JavaScript 文件上传

    function fileUpload(targetUrl) { // 隐藏表单名称 var inputName = '_fileselect'; // 文件尺寸 this.fileSize = 0; ...

  8. 移动端HTML5实现文件上传

    PC端上传文件多半用插件,引入flash都没关系,但是移动端要是还用各种冗余的插件估计得被喷死,项目里面需要做图片上传的功能,既然H5已经有相关的接口且兼容性良好,当然优先考虑用H5来实现. 用的技术 ...

  9. 基于HTML5 Ajax文件上传进度条如何实现（jquery版本）

    <!DOCTYPE html> <html> <head> <title>html5_2.html</title> <meta htt ...

随机推荐

  1. Bootstrap 按钮(Button)插件加载状态

    通过按钮(Button)插件,您可以添加进一些交互.比如控制按钮的状态.或者为其它组件(工具栏)创建按钮组. 加载状态 如需向按钮添加加载状态,只需要简单地向 button 元素添加 data-loa ...

  2. C#装箱与拆箱的研究

    在对这个问题展开讨论之前,我们不妨先来问这么几个问题,以系统的了解我们今天要探究的主题. 观者也许曾无数次的使用过诸如System.Console类或.NET类库中那些品种繁多的类.那么,我想问的是它 ...

  3. SpringBoot2.X最佳实践《一》 之 SpringBoot2.x初体验

    SpringBoot2.X最佳实践 前言 本系列文章,从零基础接触  SpringBoot2.x新版本,基础入门使用,热部署,到整合各个主流框架Redis4.x,消息队列AciveMQ, Rocket ...

  4. React Native 初探

    推荐文章 React Native 简介:用 JavaScript 搭建 iOS 应用 (1) React Native 简介:用 JavaScript 搭建 iOS 应用 (2) React Nat ...

  5. 第18题:在O(1)时间删除链表结点+删除链表中重复的节点

    题目描述:题目描述在O(1)时间删除链表结点 给定单向链表的头指针和一个结点指针,定义一个函数在O(1)时间删除该结点. 考查创新编程能力. 思路: 1.如果从头到尾遍历,时间O(n) 2.如果将待删 ...

  6. linux运维、架构之路-MySQL多实例

    一.MySQL多实例介绍            一台服务器上开启多个不同的服务端口(3306,3307,3308),运行多个MySQL服务进程,共用一套MySQL安装程序,多实例MySQL在逻辑上看是 ...

  7. 学习Pytbon第八天，文件的操作

    文件的常用操作字符 data=open('月亮代表我的心',encoding='utf-8').read() f=open('月亮代表我的心',encoding='utf-8')#提取内存对象也叫文件 ...

  8. Python9-IO模型-day41

    # 进程:启动多个进程,进程之间是由操作系统负责调用# 线程:启动多个线程,真正由被cpu执行的最小单位实际是线程# 开启一个线程,创建一个线程,寄存器.堆栈# 关闭一个线程# 协程# 本质上是一个线 ...

  9. B - Sonya and Exhibition CodeForces - 1004B (思维题)

    B. Sonya and Exhibition time limit per test 1 second memory limit per test 256 megabytes input stand ...

  10. Codeforces Round #435 (Div. 2) B (二分图) C(构造)

    B. Mahmoud and Ehab and the bipartiteness time limit per test 2 seconds memory limit per test 256 me ...