<!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. day 45 前端CSS

      前端CSS   CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式 ...

  2. GC 案例收集整理

    1.数组动态扩容  现象:系统一直在做cms gc,但是老生代一直不降下去,但是执行一次jmap -histo:live之后,也就是主动触发一次full gc之后,通过jstat -gcutil来看老 ...

  3. js 引入Vue.js实现vue效果

    拆分组件为单个js见:https://www.jianshu.com/p/2f0335818ceb 效果 html <!DOCTYPE html> <html> <hea ...

  4. jqGrid的subGrid子表格

    使用完整jqGrid作为子表格 使用子表格,涉及到jqGrid的三个选项: subGrid :首先必须将jqGrid的subGrid选项设置为true,默认为false:当此项设为true的时候,Gr ...

  5. poj 2288

    传送门 解题思路 状压dp,记录路径条数,dp[S][i][j]表示状态为S,前一个点是i,再前一个点是j的最大值,然后在开个一样的数组记录方案数,时间复杂度O(2^n*n^2),注意要用long l ...

  6. Vue简单评星效果与单张图片上传

    <form class="" id="pj-frm"> <div class="assess-header"> &l ...

  7. Sublime text3 代码格式化插件vue

    同事用的windows的sublime轻量级容易上手.我们现在强制eslint规范.我们就需要安装这个格式化代码的插件"html-css-js-prettify" 使用 Subli ...

  8. css3之文本和颜色功能之text-shadow

    总本看一下 1.text-shadow 语法:text-shadow: h-shadow v-shadow blur color; h-shadow: 必需.水平阴影的位置.允许负值. v-shado ...

  9. mac上python3.x安装 图文详解

    mac安装brew报错及解决办法 https://blog.csdn.net/zdp072/article/details/82563320 更改脚本中的资源链接,替换成中国科学技术大学的镜像 htt ...

  10. Java TimeUnit使用

    TimeUnit是java.util.concurrent包下面的一个类,表示给定单元粒度的时间段. 常用的颗粒度 TimeUnit.DAYS //天 TimeUnit.HOURS //小时 Time ...