<!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. Data too long for column

    一篇文章的正文,需要很多字数,默认就是255,不够 @Lob @Basic @Type(type = "text") @Column(name = "detail&quo ...

  2. java生成excel报表文件

    此次简单的操作将数据从数据库导出生成excel报表以及将excel数据导入数据库 首先建立数据库的连接池: package jdbc; import java.io.FileInputStream; ...

  3. <每日一题>题目22：简单的python练习题(31-40)

    #31.分布式爬虫主要解决什么问题? ''' ip 带宽 CPU IO ''' #32.网络传输层 ''' 应用层—http ftp dns nfs 传输层—tcp --udp 网络层—ip icmp ...

  4. spark生态圈简介

    原文引自:http://www.cnblogs.com/shishanyuan/p/4700615.html 1.简介 1.1 Spark简介 Spark是加州大学伯克利分校AMP实验室(Algori ...

  5. 从NoSQL到NewSQL数据库

  6. linux为内核新增系统调用

    1.编写hello.c文件,实现系统调用执行函数,如: asmlinkage long sys_helloworld(void){ printk( "helloworld!"); ...

  7. OpenGL学习笔记2017/8/29

    OpenGL学习日志: 感谢doing5552 的OpenGL入门学习:http://www.cppblog.com/doing5552/archive/2009/01/08/71532.html 相 ...

  8. 初识css3 3d动画效果

    (先看我博客右上角的3d盒子动画效果,目前没做兼容处理,最好最新的chrome看)无意间看到网上css3写的3d动画效果,实在炫酷,以前理解为需要js去计算去写,没想到css直接可以实现.于是开始研究 ...

  9. 官方 NSIS 插件全集简单介绍

    Math plugin (contain examples) -- 数学函数插件,NSIS 软件已包含,这个不用说了吧,计算的时候必用. System plugin (contain examples ...

  10. [code]图像亮度调整enhancement

    //draft 2013.9 //F=X2/u; ////远处细节被淹没. 亮的地方增亮明显,暗的地方更暗. 不可取. // CvScalar rgb; // rgb=cvAvg(src); //fo ...