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
随机推荐
- 初学css list-style属性
网上很多css布局中会看到这样的一句:list-style:none: 那么list-style到底什么意思?中文即:列表样式:无: 其实它是一个简写属性,包含了所有列表属性,具体包含list-sty ...
- vscode加MinGw三步搭建c/c++调试环境
vscode加MinGw三步搭建c/c++调试环境 step1:安装vscode.MinGw 1.1 vscod常规安装:https://code.visualstudio.com/ 1.2 MinG ...
- sys模块与shutil模块
#coding=utf-8 import sys ## sys.argv #从命令行获取参数 import shutil #文件.文件夹.压缩包.处理模块 f1 = open("test.t ...
- 用jquery制作的简单轮播图
我也是进入H5前端的小菜鸟一枚,最近才进入jquery的学习,所以打算对自己的学习进行记录. 今天分享的是一个简单的轮播图,这个轮播图的特效很简单,能够进行图片的轮播以及点击相应图片,图片能够跳转到相 ...
- 6-基于TMS320C6678、FPGA XC5VSX95T的6U CPCI 8路光纤信号处理卡
基于TMS320C6678.FPGA XC5VSX95T的6U CPCI 8路光纤信号处理卡 1.板卡概述 本板卡由我公司自主研发,基于CPCI架构,符合CPCI2.0标准,采用两片TI DSP T ...
- 01scikit-learn数据集下载
In [2]: from sklearn.datasets import load_iris iris = load_iris() iris.keys() Out[2]: dict_keys(['da ...
- Oracle 附加日志(supplemental log)
参考资料: 1.https://blog.csdn.net/li19236/article/details/41621179
- 使用GDB调试时attach ID不被允许
在进入gdb后,直接使用attach ID,出现下面的情况: Could not attach to process. If your uid matches the uid of the targ ...
- alert(1) to win 14
<!--<script></script>之间的内容会被当作js处理,所以,//we'll use this later </script>被注释了.最终 i ...
- bzoj4408 [Fjoi 2016]神秘数 & bzoj4299 Codechef FRBSUM 主席树+二分+贪心
题目传送门 https://lydsy.com/JudgeOnline/problem.php?id=4299 https://lydsy.com/JudgeOnline/problem.php?id ...