<!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. atoi和itoa函数的实现方法

    atoi的实现: #include<iostream> using namespace std; int atio1(char *s) { int sign=1,num=0; if(*s= ...

  2. MySQL-Utilities：mysqldbcompare及跳过复制错误

    mysqldbcompare也是MySQL-Utilities工具集的一个脚本.mysqldbcompare从两个数据库比较对象和数据的不同.数据库中的对象包括:表.视图.触发器.存储过程.函数和事件 ...

  3. ES6之主要知识点(四）数值

    引自:http://es6.ruanyifeng.com/#docs/number 1.Number.isFinite(),Number.isNaN() Number.isFinite(); // t ...

  4. VIsualSVN server 安装及旧仓库导入

    安装参考: 1,  http://www.cnblogs.com/xiaobaihome/archive/2012/03/20/2407610.html SVN服务器搭建和使用(一) Subversi ...

  5. 启发式搜索——A*算法

    启发式搜索 启发式搜索是一种对搜索到的每一个位置进行评估,然后从评估的最优位置进行搜索直到目的地, 由于搜索时对每一个位置的评估是基于直观或经验的所有叫启发式搜索 A*算法 历史: 1964年Nils ...

  6. 【2019云栖大会】这一场，我们好好聊聊5G和边缘计算

    一年一度的科技盛会杭州云栖大会Apsara Conference就要来了9月25-27日数万名开发者将齐聚杭州云栖小镇共同探索人类科技演进的脉搏聚焦面向未来的创新.热点技术话题 5G和边缘计算是201 ...

  7. 微信小程序上传报错：以下文件没有被打包上传: · .gitignore

    简单粗暴的办法就是:找到gitignore文件,把该文件删除掉即可. 在使用Git的过程中,我们喜欢有的文件比如日志,临时文件,编译的中间文件等不要提交到代码仓库,这时就要设置相应的忽略规则,来忽略这 ...

  8. php用正则表达式匹配URL的简单方法（亲测可行）

    https://www.jb51.net/article/43093.htm 在PHP的官网上看到的parse_url()函数的替代方案.结果和parse_url()函数差不多,是使用正则实现的.UR ...

  9. 【python之路32】python异常处理

    一.捕获异常 1.try  except #!usr/bin/env python # -*- coding:utf-8 -*- num = input("请输入一个数字:") t ...

  10. leyou_01_环境搭建

    1.乐优商城项目搭建 前端技术: 基础的HTML.CSS.JavaScript(基于ES6标准) JQuery Vue.js 2.0以及基于Vue的框架:Vuetify 前端构建工具:WebPack ...