day25—JavaScript实现文件拖拽上传案例实践
转行学开发,代码100天——2018-04-10
今天记录一个利用JavaScript实现文件拖拽上传到浏览器,后天将文件打开的小案例。
基本功能:1点击添加文件 2 文件拖拽添加
html:
<div id="box">
<span id="span">选择或拖放文件</span>
<input id="browse" type="file">
</div>
css:
#box{
position: relative;
border:3px dashed #ddd;
width: 200px;
height: 70px;
text-align: center;
line-height: 70px;
cursor: pointer;
}
#box input{
position: absolute;
top:;
left:;
width: 100%;
height: 100%;
opacity:;
cursor: pointer;
}
#box.hover{
border:3px solid #999;
}
javascript:
<script type="text/javascript">
var box = document.getElementById("box");
var input = document.getElementById("browse");
var span = document.getElementById("span");
//box 事件
box.ondragover = function()
{
this.className = "box hover"; }
box.ondragleave = function()
{
this.className = "box";
} //input 事件 input.ondragover = function(e)
{
e.preventDefault(); }
input.ondrop = function(e)
{
e.preventDefault();
box.className = "box";
var file = e.dataTransfer.files[0];
show(file);
}
input.onchange = function()
{
var file = this.files[0];
show(file);
}
function show(file)
{
span.innerHTML = file.name;
var fr = new FileReader();
fr.onload = function()
{
var result = this.result;
console.log(result);
}
fr.readAsText(file);
} </script>
案例效果:
day25—JavaScript实现文件拖拽上传案例实践的更多相关文章
- html5 文件拖拽上传
本文首先发表在 码蜂笔记 : http://coderbee.net/index.php/web/20130703/266 html5 文件拖拽上传是个老话题了,网上有很多例子,我一开始的代码也是网 ...
- php和js实现文件拖拽上传
Dropzone.js实现文件拖拽上传 http://www.sucaihuo.com/php/1399.html demo http://www.sucaihuo.com/jquery/13/139 ...
- Dropzone.js实现文件拖拽上传
dropzone.js是一个开源的JavaScript库,提供 AJAX 异步文件上传功能,支持拖拽文件.支持最大文件大小.支持设置文件类型.支持预览上传结果,不依赖jQuery库. 使用Dropzo ...
- HTML5应用之文件拖拽上传
使用HTML5的文件API,可以将操作系统中的文件拖放到浏览器的指定区域,实现文件上传到服务器.本文将结合实例讲解HTML5+jQuery+PHP实现拖拽上传图片的过程,来看下HTML5的魅力吧. H ...
- Dropzone.js文件拖拽上传提示Dropzone already attached 解决
最近收到客户的反馈,在操作上传文件有时会出现没有任何.大部分时间是正常. 重现问题后,f12打开后台控制台发现如下提示: Uncaught Error: Dropzone already attach ...
- SpringMvc+jQuery 文件拖拽上传、选择上传
最近做了个简易的基于boostrap的文件上传功能,jsp版本的,后续会完善更多的功能,不过现在已经能用了,需要的小伙伴,直接引用下面的文件内容直接copy到自己的项目中就ok了,效果如图: file ...
- HTML5文件拖拽上传记录
JS文件: var FileName = ""; var FileStr = ""; (function () { function $id(id) { ret ...
- 使用bootstrap fileinput多文件拖拽上传的记录
今天琢磨文件上传,刚好看到bootstrap 我就搜了一下,刚刚能满足需求,使用上手也很快,使用完还是记录下来. 1.首先我们下载插件包,可以用nuget搜索bootstrap-fileinput 也 ...
- JavaScript 文件拖拽上传插件 dropzone.js 介绍
http://www.renfei.org/blog/dropzone-js-introduction.html
随机推荐
- linux--初识别
镜像网站 下载系统镜像 http://mirrors.163.com/ http://mirrors.sohu.com https://www.netcraft.com/ 命令大全 https://m ...
- Symmetric Tree(对称二叉树)
来源:https://leetcode.com/problems/symmetric-tree Given a binary tree, check whether it is a mirror of ...
- Ubuntu解决Nvidia驱动缺失导致的HDMI无法输出问题
朋友的电脑是联想Y7000,因为Nvidia驱动的问题几次头疼脑大.这次是出现了HDMI在Windows 10下输出正常,而Ubuntu系统下无法输出. 原因分析 如果通过HDMI去连接显示器以后会发 ...
- 扩展欧几里得算法详解(exgcd)
一.前言 本博客适合已经学会欧几里得算法的人食用~~~ 二.扩展欧几里得算法 为了更好的理解扩展欧几里得算法,首先你要知道一个叫做贝祖定理的玄学定理: 即如果a.b是整数,那么一定存在整数x.y使得$ ...
- Linux快速访问多个目录
Linux下实现多个目录之间快速切换 dirs -v # 显示栈目录dirs -c # 清空栈目录 pushd # 加入当前目录pushd director # 加入指定目录pushd +/-i ...
- (二:NIO系列) Java NIO Buffer
出处:Java NIO Buffer Buffer是一个抽象类,位于java.nio包中,主要用作缓冲区.Buffer缓冲区本质上是一块可以写入数据,然后可以从中读取数据的内存.这块内存被包装成NIO ...
- python的cls,self,classmethod,staticmethod
python类里会出现这三个单词,self和cls都可以用别的单词代替,类的方法有三种, 一是通过def定义的 普通的一般的,需要至少传递一个参数,一般用self,这样的方法必须通过一个类的实例去访问 ...
- python学习笔记(7)容器以及容器的访问使用
一.容器 1.list列表 序列是python中最基本的数据结构,序列中的每个元素都分配一个数字,它的位置或索引,第一个索引是0,第二个索引是1,以此类推 Built-in mutable seque ...
- 详解Document.Cookie
转自:https://www.jb51.net/article/77009.htm 具体来说cookie机制采用的是在客户端保持状态的方案,而session机制采用的是在服务器端保持状态的方案. 同时 ...
- zabbix3.4.8中提示host [4gronghe_110] not found
查看zabbix_agentd.log时出现下列错误 [root@4gronghe_110 ~]# tail /var/log/zabbix/zabbix_agentd.log 1266:2014 ...