<!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         div{

             min-height: 202px;

             min-width: 200px;

             border: 1px solid #ccc;

         }

         .img img {

             border: 4px solid #999999;

             margin-left: 5px;

         }

     </style>

 </head>

 <body>

 <form action="">

     文件： <input type="file" name="myFile" id="myFile"> <br>

     <input type="submit">

 </form>

 <div class="img">

     <!--<img src="" alt="">-->

 </div>

 <script>

    /* 针对于目标元素的事件

     * ondragenter:当被拖拽元素进入到目标元素时触发

     * ondragover:当被拖拽元素在目标元素上方时持续触发

     * ondragleave:当被拖拽元素离开目标元素时触发

     * ondrop:当被拖拽元素在目标元素上方时松开鼠标时触发*/

    var div = document.querySelector('div');

    document.ondragenter = function (e) {

    }

    document.ondragover = function (e) {

        // 阻止默认行为

       e.preventDefault();

    }

    document.ondragleave = function (e) {

    }

    document.ondrop = function (e) {

        // 阻止浏览器默认打开图片的跳转浏览图片页面的行为

        e.preventDefault();

        /*实现预览

       * 1.读取文件资源--FileReader

       * 2.获取读取结果：onload + result*/

        var reader = new FileReader();

        /*读取*/

        /*当用户拖拽文件到目标元素的时候，拖拽操作会将这些文件资源存储在e.dataTransfer.files对象中*/

        for (var i = 0; i < e.dataTransfer.files.length; i++) {

            reader.readAsDataURL(e.dataTransfer.files[i]);

            //console.log(e.dataTransfer.files[0]);

            /*onload:

            * onabort:

            * onerror:

            * onloadstart:

            * onprogress:*/

            var img = document.createElement('img');

            img.style.width = 100 + 'px';

            img.style.height = 100 + 'px';

            div.appendChild(img);

            reader.onload = function () {

                img.src = reader.result;

            }

        }

    }

 </script>

 </body>

 </html>

H5C3--FileReader和拖拽的应用的更多相关文章

  1. HTML5多图片拖拽上传带进度条

    前言 昨天利用css2的clip属性实现了网页进度条觉得还不错,但是很多情况下,我们在那些时候用进度条呢,一般网页加载的时候如果有需要可以用,那么问题就来了,怎么才算整个加载完毕呢,是页面主要模块加载 ...

  2. H5 语义化、基本事件 浅析 （含file对象、drag拖拽等）

    1.语义化标签 帮助搜索引擎,盲人设备等程序,辨识网页内容信息,明确网页区域分布,不体现任何样式,但存在浏览器兼容性问题,如IE8下无<header>标签. ① H5基本语义标签: < ...

  3. [转]人人网首页拖拽上传详解(HTML5 Drag&Drop、FileReader API、formdata)

    人人网首页拖拽上传详解(HTML5 Drag&Drop.FileReader API.formdata) 2011年12月11日 | 彬Go 上一篇:给力的 Google HTML5 训练营( ...

  4. FileReader (三) － 网页拖拽并预显示图片简单实现

    以下是一个很贱很简单的一个 在网页上图拽图片并预显示的demo. 我是从https://developer.mozilla.org/en-US/docs/Web/API/FileReader#Stat ...

  5. 图片上传插件ImgUploadJS：用HTML5 File API 实现截图粘贴上传、拖拽上传

    一 . 背景及效果 当前互联网上传文件最多的就是图片文件了,但是传统web图片的截图上传需要:截图保存->选择路径->保存后再点击上传->选择路径->上传->插入. 图片 ...

  6. dropzonejs中文翻译手册 DropzoneJS是一个提供文件拖拽上传并且提供图片预览的开源类库.

    http://wxb.github.io/dropzonejs.com.zh-CN/dropzonezh-CN/ 由于项目需要,完成一个web的图片拖拽上传,也就顺便学习和了解了一下前端的比较新的技术 ...

  7. 让Web页面中的编辑器支持黏贴或直接拖拽来添加图片

    基本原理是将剪贴板中的图片二进制数据转为Base64编码 代码: <html> <head> </head> <body> <script src ...

  8. jQ插件--时间线插件和拖拽API

    这个时间轴是工作上用到的,自己写了一个, qq空间有时间轴的控件, 百度文库也有时间轴的控件: 百度的时间轴大概是这样的: 用户点击对应的锚链接,  那个三角会滚动, 然后左侧的界面也会滚动: 实际的 ...

  9. html5拖拽

    html5拖拽一 <!DOCTYPE html> <html> <head lang="en"> <meta charset=" ...

  10. h5图片上传预览与拖拽上传

    图片上传: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...

随机推荐

  1. 第一周课堂笔记3th

    1.bool值    True正确                False错误   数字为0时的显示  为空值时“” 2. str   int   bool布尔值  之间的转化 str   int  ...

  2. 爬虫（二）建立代理ip池

    之前我们说网站反爬虫的一个常用方法是检测ip,限制访问频率.所以我们要通过设置代理ip的办法绕过这个限制.有不少提供免费代理ip的网站,像https://www.xicidaili.com/nt/,我 ...

  3. 使用Log4net把日志写入到SqlServer数据库

    1.官网URL: http://logging.apache.org/log4net/ 2.配置文件参照URL: http://logging.apache.org/log4net/release/c ...

  4. Vue+jquery上拉加载

    <ul> <li class="new-list" v-for="item in proarr"> <a :href=" ...

  5. Java虚拟机原理图解-- 1.1、class文件基本组织结构 [转]

    作为Java程序猿,我们知道,我们写好的.java 源代码,最后会被Java编译器编译成后缀为.class的文件,该类型的文件是由字节组成的文件,又叫字节码文件.那么,class字节码文件里面到底是有 ...

  6. 转载 ASP.NET SignalR 与LayIM配合，轻松实现网站客服聊天室（三） 激动人心的时刻到啦，实现1v1聊天

    ASP.NET SignalR 与LayIM配合,轻松实现网站客服聊天室(三) 激动人心的时刻到啦,实现1v1聊天   看起来挺简单,细节还是很多的,好,接上一篇,我们已经成功连接singalR服务器 ...

  7. 013- unittest单元测试框架

    unittest单元测试框架 重要的概念 1. TestCase TestCase 是最小的测试单元,用于检查特定输入集合的特定返回值.unittest提供了TestCase基类,我们创建的测试类需要 ...

  8. javascript基础：dom

    Dom: * 概念:Document Object  Model    文档对象模型 * 将标记语言文档的各个组成部分,封装成对象,可以使用这些对象,对标记语言文档进行CRUD的动态操作 *    D ...

  9. Redis源码解析：25集群(一)握手、心跳消息以及下线检测

    Redis集群是Redis提供的分布式数据库方案,通过分片来进行数据共享,并提供复制和故障转移功能. 一:初始化 1:数据结构 在源码中,通过server.cluster记录整个集群当前的状态,比如集 ...

  10. TCP/TP：DNS区域（Zone）

    之前阅读资料不是特别明白,看到一个博主的解释,豁然开朗,特此记录. https://blog.csdn.net/huangzx3/article/details/79347556 DNS区域(ZONE ...