转行学开发,代码100天——2018-04-10

今天记录一个利用JavaScript实现文件拖拽上传到浏览器,后天将文件打开的小案例。

基本功能:1点击添加文件 2 文件拖拽添加

html:

  1. <div id="box">
  2. <span id="span">选择或拖放文件</span>
  3. <input id="browse" type="file">
  4. </div>

css:

  1. #box{
  2. position: relative;
  3. border:3px dashed #ddd;
  4. width: 200px;
  5. height: 70px;
  6. text-align: center;
  7. line-height: 70px;
  8. cursor: pointer;
  9. }
  10. #box input{
  11. position: absolute;
  12. top:;
  13. left:;
  14. width: 100%;
  15. height: 100%;
  16. opacity:;
  17. cursor: pointer;
  18. }
  19. #box.hover{
  20. border:3px solid #999;
  21. }

javascript:

  1. <script type="text/javascript">
  2. var box = document.getElementById("box");
  3. var input = document.getElementById("browse");
  4. var span = document.getElementById("span");
  5. //box 事件
  6. box.ondragover = function()
  7. {
  8. this.className = "box hover";
  9.  
  10. }
  11. box.ondragleave = function()
  12. {
  13. this.className = "box";
  14. }
  15.  
  16. //input 事件
  17.  
  18. input.ondragover = function(e)
  19. {
  20. e.preventDefault();
  21.  
  22. }
  23. input.ondrop = function(e)
  24. {
  25. e.preventDefault();
  26. box.className = "box";
  27. var file = e.dataTransfer.files[0];
  28. show(file);
  29. }
  30. input.onchange = function()
  31. {
  32. var file = this.files[0];
  33. show(file);
  34. }
  35. function show(file)
  36. {
  37. span.innerHTML = file.name;
  38. var fr = new FileReader();
  39. fr.onload = function()
  40. {
  41. var result = this.result;
  42. console.log(result);
  43. }
  44. fr.readAsText(file);
  45. }
  46.  
  47. </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. 初学css list-style属性

    网上很多css布局中会看到这样的一句:list-style:none: 那么list-style到底什么意思?中文即:列表样式:无: 其实它是一个简写属性,包含了所有列表属性,具体包含list-sty ...

  2. vscode加MinGw三步搭建c/c++调试环境

    vscode加MinGw三步搭建c/c++调试环境 step1:安装vscode.MinGw 1.1 vscod常规安装:https://code.visualstudio.com/ 1.2 MinG ...

  3. sys模块与shutil模块

    #coding=utf-8 import sys ## sys.argv #从命令行获取参数 import shutil #文件.文件夹.压缩包.处理模块 f1 = open("test.t ...

  4. 用jquery制作的简单轮播图

    我也是进入H5前端的小菜鸟一枚,最近才进入jquery的学习,所以打算对自己的学习进行记录. 今天分享的是一个简单的轮播图,这个轮播图的特效很简单,能够进行图片的轮播以及点击相应图片,图片能够跳转到相 ...

  5. 6-基于TMS320C6678、FPGA XC5VSX95T的6U CPCI 8路光纤信号处理卡

    基于TMS320C6678.FPGA XC5VSX95T的6U CPCI 8路光纤信号处理卡 1.板卡概述  本板卡由我公司自主研发,基于CPCI架构,符合CPCI2.0标准,采用两片TI DSP T ...

  6. 01scikit-learn数据集下载

    In [2]: from sklearn.datasets import load_iris iris = load_iris() iris.keys() Out[2]: dict_keys(['da ...

  7. Oracle 附加日志(supplemental log)

    参考资料: 1.https://blog.csdn.net/li19236/article/details/41621179

  8. 使用GDB调试时attach ID不被允许

    在进入gdb后,直接使用attach ID,出现下面的情况: Could not attach to process.  If your uid matches the uid of the targ ...

  9. alert(1) to win 14

    <!--<script></script>之间的内容会被当作js处理,所以,//we'll use this later </script>被注释了.最终 i ...

  10. bzoj4408 [Fjoi 2016]神秘数 & bzoj4299 Codechef FRBSUM 主席树+二分+贪心

    题目传送门 https://lydsy.com/JudgeOnline/problem.php?id=4299 https://lydsy.com/JudgeOnline/problem.php?id ...