转行学开发,代码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实现文件拖拽上传案例实践的更多相关文章

  1. html5 文件拖拽上传

    本文首先发表在  码蜂笔记 : http://coderbee.net/index.php/web/20130703/266 html5 文件拖拽上传是个老话题了,网上有很多例子,我一开始的代码也是网 ...

  2. php和js实现文件拖拽上传

    Dropzone.js实现文件拖拽上传 http://www.sucaihuo.com/php/1399.html demo http://www.sucaihuo.com/jquery/13/139 ...

  3. Dropzone.js实现文件拖拽上传

    dropzone.js是一个开源的JavaScript库,提供 AJAX 异步文件上传功能,支持拖拽文件.支持最大文件大小.支持设置文件类型.支持预览上传结果,不依赖jQuery库. 使用Dropzo ...

  4. HTML5应用之文件拖拽上传

    使用HTML5的文件API,可以将操作系统中的文件拖放到浏览器的指定区域,实现文件上传到服务器.本文将结合实例讲解HTML5+jQuery+PHP实现拖拽上传图片的过程,来看下HTML5的魅力吧. H ...

  5. Dropzone.js文件拖拽上传提示Dropzone already attached 解决

    最近收到客户的反馈,在操作上传文件有时会出现没有任何.大部分时间是正常. 重现问题后,f12打开后台控制台发现如下提示: Uncaught Error: Dropzone already attach ...

  6. SpringMvc+jQuery 文件拖拽上传、选择上传

    最近做了个简易的基于boostrap的文件上传功能,jsp版本的,后续会完善更多的功能,不过现在已经能用了,需要的小伙伴,直接引用下面的文件内容直接copy到自己的项目中就ok了,效果如图: file ...

  7. HTML5文件拖拽上传记录

    JS文件: var FileName = ""; var FileStr = ""; (function () { function $id(id) { ret ...

  8. 使用bootstrap fileinput多文件拖拽上传的记录

    今天琢磨文件上传,刚好看到bootstrap 我就搜了一下,刚刚能满足需求,使用上手也很快,使用完还是记录下来. 1.首先我们下载插件包,可以用nuget搜索bootstrap-fileinput 也 ...

  9. JavaScript 文件拖拽上传插件 dropzone.js 介绍

    http://www.renfei.org/blog/dropzone-js-introduction.html

随机推荐

  1. linux--初识别

    镜像网站 下载系统镜像 http://mirrors.163.com/ http://mirrors.sohu.com https://www.netcraft.com/ 命令大全 https://m ...

  2. Symmetric Tree(对称二叉树)

    来源:https://leetcode.com/problems/symmetric-tree Given a binary tree, check whether it is a mirror of ...

  3. Ubuntu解决Nvidia驱动缺失导致的HDMI无法输出问题

    朋友的电脑是联想Y7000,因为Nvidia驱动的问题几次头疼脑大.这次是出现了HDMI在Windows 10下输出正常,而Ubuntu系统下无法输出. 原因分析 如果通过HDMI去连接显示器以后会发 ...

  4. 扩展欧几里得算法详解(exgcd)

    一.前言 本博客适合已经学会欧几里得算法的人食用~~~ 二.扩展欧几里得算法 为了更好的理解扩展欧几里得算法,首先你要知道一个叫做贝祖定理的玄学定理: 即如果a.b是整数,那么一定存在整数x.y使得$ ...

  5. Linux快速访问多个目录

    Linux下实现多个目录之间快速切换 dirs -v # 显示栈目录dirs -c # 清空栈目录 pushd # 加入当前目录pushd director   #  加入指定目录pushd +/-i ...

  6. (二:NIO系列) Java NIO Buffer

    出处:Java NIO Buffer Buffer是一个抽象类,位于java.nio包中,主要用作缓冲区.Buffer缓冲区本质上是一块可以写入数据,然后可以从中读取数据的内存.这块内存被包装成NIO ...

  7. python的cls,self,classmethod,staticmethod

    python类里会出现这三个单词,self和cls都可以用别的单词代替,类的方法有三种, 一是通过def定义的 普通的一般的,需要至少传递一个参数,一般用self,这样的方法必须通过一个类的实例去访问 ...

  8. python学习笔记(7)容器以及容器的访问使用

    一.容器 1.list列表 序列是python中最基本的数据结构,序列中的每个元素都分配一个数字,它的位置或索引,第一个索引是0,第二个索引是1,以此类推 Built-in mutable seque ...

  9. 详解Document.Cookie

    转自:https://www.jb51.net/article/77009.htm 具体来说cookie机制采用的是在客户端保持状态的方案,而session机制采用的是在服务器端保持状态的方案. 同时 ...

  10. zabbix3.4.8中提示host [4gronghe_110] not found

      查看zabbix_agentd.log时出现下列错误 [root@4gronghe_110 ~]# tail /var/log/zabbix/zabbix_agentd.log 1266:2014 ...