使用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. EL和JSTL表达式学习记录

    EL.JSTL表达式EL:1.EL使用目的:代替jsp页面中java脚本编写 2.EL作用:(1)从域中取出数据(最重要)(2)EL的内置对象(11个)(3)EL可以执行表达式运算 JSTL(JSP标 ...

  2. WebAppBuilder独立于portal之arcgis for js应用框架研究之二

    WAB采用ArcGIS JavaScript for API作为地图开发底层,采用Web AppBuilder作为开发框架,利用该框架即拿即用的Widget来构建应用,比如制图.查询.地理处理.编辑. ...

  3. 定位设备--llseek实现

    /** 如果llseek实现lseek和llseek系统调用,如果未定义llseek方法, 内核默认修改file结构体中的f_pos成员来实现定位,如果是操作一个 设备,则需提供自己的llseek方法 ...

  4. C++ 学习笔记 （七）继承与多态 virtual关键字的使用场景

    在上一篇 C++ 学习笔记 (六) 继承- 子类与父类有同名函数,变量 中说了当父类子类有同名函数时在外部调用时如果不加父类名则会默认调用子类的函数.C++有函数重写的功能需要添加virtual关键字 ...

  5. 第一篇：UnicodeDecodeError: 'utf-8' codec can't decode byte 0xc3 in position 0: invalid continuation byte

    需求:python如何实现普通用户登录服务器后切换到root用户再执行命令 解决参考: 代码: def verification_ssh(host,username,password,port,roo ...

  6. C语言：自己编写的简易ftp客户端，包含（列表，进入目录，上传文件，下载文件，删除文件）功能

    //简易ftp客户端#include <stdio.h> #include <string.h> #include <sys/types.h> #include & ...

  7. Hi3518EV300编译U-Boot和内核报错:loadlocale.c:130: _nl_intern_locale_data: Assertion `cnt < (sizeof (_nl_value_type_LC_TIME) / sizeof (_nl_value_type_LC_TIME[0]))' failed. Aborted (core dumped)

    下载Hi3518EV300的SDK后编译内核和U-boot,发现爆出如下错误: scripts/kconfig/conf --silentoldconfig Kconfig Aborted (core ...

  8. 实验6 流类库与I/O

    Part2 基础练习 使用文件I/O流,以文本方式打开Part1中合并后的文件,在文件最后一行添加字符"merge successfully. " // 合并两个文件内容到一个新文 ...

  9. 2 - JVM随笔分类（JVM堆的内存回收）

    JVM常用的回收算法是: 标记/清除算法 标记/复制算法 标记/整理算法 其中上诉三种算法都先具备,标记阶段,通过标记阶段,得到当前存活的对象,然后再将非标记的对象进行清除,而对象内存中对象的标记过程 ...

  10. 手机端sticker布局，底部按钮在屏幕底部

    <template> <div class="product-detail-container"> <div class="detail&q ...