<!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. Eclipse Java开发环境的搭建

    (2019年2月19日注:这篇文章原先发在自己github那边的博客,时间是2016年9月6日) 工作室的老人家们和小朋友们组成了一个Java开发学习团队,想起之前在暑假项目中学过一点Java基础知识 ...

  2. 密码学笔记(4)——RSA的其他攻击

    上一篇详细分析了几种分解因子的算法,这是攻击RSA密码最为明显的算法,这一篇中我们考虑是否有不用分解模数n就可以解密RSA的密文的方法,这是因为前面也提到,当n比较大的时候进行分解成素数的乘积是非常困 ...

  3. Autowire（自动装配）机制

    为什么Spring要支持Autowire(自动装配) 先写几个类,首先定义一个Animal接口表示动物: 1 public interface Animal { 2 3 public void eat ...

  4. python 运行python -m pip list 出现错误

    1.出现如下错误提示 2解决方案 解决方法:(windows)在C:\Users{用户名}\ 目录下创建名称为pip的文件夹,里面创建文本文件,内容为 [list] format=columns 保存 ...

  5. Vue 本地代理 纯前端技术解决跨域

    vue-axios获取数据很多小伙伴都会使用,但如果前后端分离且后台没设置跨域许可,那要怎样才能解决跨域问题? 常用方法有几种: 通过jsonp跨域 通过修改document.domain来跨子域 使 ...

  6. 469 Same Tree

    原题网址:https://www.lintcode.com/problem/same-tree/description 描述 检查两棵二叉树是否等价.等价的意思是说,首先两棵二叉树必须拥有相同的结构, ...

  7. cookie - 提示上一次访问该网页的时间

          案例:记住上一次访问时间         1. 需求:             1. 访问一个Servlet,如果是第一次访问,则提示:您好,欢迎您首次访问.             2. ...

  8. 【BZOJ4161】Shlw loves matrixI

    题目描述 给定数列 {hn}前k项,其后每一项满足 hn = a1h(n-1) + a2h(n-2) + ... + ak*h(n-k) 其中 a1,a2...ak 为给定数列.请计算 h(n),并将 ...

  9. Spring MVC(二)--Spring MVC登陆实例

    本文通过一个简单的登陆实例实现Spring MVC的流程,同时整合 MyBatis使用,流程是这样的: 1.访问一个URL进入登陆界面 2.输入正确的用户名和密码,成功则进入index页面,否则留在登 ...

  10. IO流19（完） --- RandomAccessFile实现数据的插入 --- 技术搬运工（尚硅谷）

    原hello.txt文件中的内容:abcdefghijklmn 想要实现的效果是,将xyz插入到abc后面,将文件内容变成:abcxyzdefghijklmn @Test public void te ...