以下是一个很贱很简单的一个 在网页上图拽图片并预显示的demo。

我是从https://developer.mozilla.org/en-US/docs/Web/API/FileReader#State_constants 里面学到的一点点点点点皮毛。 建议大家参考。

很粗糙的实现，对不住了。

上部分蓝色区域： 拖拽区域

下部分黄色区域： 预显示区域

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>File(s) size</title>

</head>

<body>

<div id="dropbox" style="width:300px; height:300px; background-color:#0FF">

</div>

<div id="preview" style="width:300px; height:300px; background-color:#FF0">

</div>

<script>

 var  dropbox ;

dropbox = document.getElementById("dropbox");

dropbox.addEventListener("dragenter", dragenter, false);

dropbox.addEventListener("dragover", dragover, false);

dropbox.addEventListener("drop", drop, false);

 function dragenter(e) {

//    alert("enter");

  e.stopPropagation();

  e.preventDefault();

}

function dragover(e) {

//    alert("over");

  e.stopPropagation();

  e.preventDefault();

}

function drop(e) {

//    alert("drop");

  e.stopPropagation();

  e.preventDefault();

  var dt = e.dataTransfer;

  var files = dt.files;

  handleFiles(files);

}

function handleFiles(files) {

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

    var file = files[i];

    var imageType = /image.*/;

    if (!file.type.match(imageType)) {

      //alert("test");

      continue;

    }

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

    var preview = document.getElementById("preview");

    img.classList.add("obj");

    img.file = file;

    preview.appendChild(img)

    var reader = new FileReader();

    reader.onload =

    (function(aImg)

        {

            return function(e)

                    {

                        aImg.src = e.target.result;

                    };

        }

    )(img);

    reader.readAsDataURL(file);

  }

}

</script>

</body>

</html>

FileReader (三) － 网页拖拽并预显示图片简单实现的更多相关文章

  1. HTML5 之 FileReader 的使用 （二） （网页上图片拖拽并且预显示可在这里学到） ［转载］

    转载至 : http://www.360doc.com/content/14/0214/18/1457948_352511645.shtml FileReader 资料(英文): https://de ...

  2. HTML5 之 FileReader 的使用 （网页上图片拖拽并且预显示可在这里学到） ［转载］

    转载至 : http://www.360doc.com/content/14/0214/18/1457948_352511416.shtml FileReader 资料(英文) : https://d ...

  3. mvc文件上传支持批量上传，拖拽以及预览，文件内容校验等

    使用bootstrap-fileinput 使用方式: 1.nuget:Install-Package bootstrap-fileinput 2.语言本地化{下载fileinput_locale_z ...

  4. .net core版 文件上传/ 支持批量上传，拖拽以及预览，bootstrap fileinput上传文件

    asp.net mvc请移步 mvc文件上传支持批量上传,拖拽以及预览,文件内容校验 本篇内容主要解决.net core中文件上传的问题  开发环境:ubuntu+vscode 1.导入所需要的包:n ...

  5. CSS 奇思妙想 | 使用 resize 实现强大的图片拖拽切换预览功能

    本文将介绍一个非常有意思的功能,使用纯 CSS 利用 resize 实现强大的图片切换预览功能.类似于这样: 思路 首先,要实现这样一个效果如果不要求可以拖拽,其实有非常多的办法. 将两张图片叠加在一 ...

  6. 网站开发常用jQuery插件总结(三）拖拽插件gridster

    1.gridster插件功能 实现类似于win8 磁贴拖拽的功能 2.gridster官方地址 http://gridster.net/ 在官方的网站上也有插件的帮助和实例,但是按照官方的说明,我在本 ...

  7. flutter实现可缩放可拖拽双击放大的图片功能

    flutter实现可缩放可拖拽双击放大的图片功能 可缩放可拖拽的功能,可实现图片或者其他widget的缩放已经拖拽并支持双击放大的功能 我们知道官方提供了双击缩放,但是不支持拖拽的功能,我们要实现向百 ...

  8. C# 图片缩放，拖拽后保存成图片的功能

    窗体界面部分如下: 鼠标的缩放功能需要手动在 OpertaionImg.Designer.cs 文件里面添加一句代码,具体代码如下: //picturePhoto显示图片的控件 this.pictur ...

  9. JS实现上传图片的三种方法并实现预览图片功能

    地址:http://www.jb51.net/article/118660.htm js HTML5拖拽图片预览 地址:http://www.jb51.net/article/88803.htm js ...

随机推荐

  1. 学会python永不加班系列之操作excel

    python作为一种解释性语言,简单高效的模式逐渐火爆.同时存在多种扩展性. 永不加班系列 python正确操作excel 实验环境: 系统:win10 语言:python3.8 承载软件:pycha ...

  2. Spring Cloud 微服务实战——nacos 服务注册中心搭建(附源码)

    作为微服务的基础功能之一的注册中心担任重要的角色.微服务将单体的服务拆分成不同的模块下的服务,而不同的模块的服务如果进行通信调用呢?这就需要服务注册与发现.本文将使用阿里开源项目 nacos 搭建服务 ...

  3. 彻底解决SLF4J的日志冲突的问题

    今天公司同事上线时发现,有的机器打印了日志,而有的机器则一条日志也没有打.以往都是没有问题的. 因此猜测是这次开发间接引入新的日志jar包,日志冲突导致未打印. 排查代码发现,系统使用的是SLF4J框 ...

  4. 一文读懂什么是渲染管线(7k字)

    01 | 渲染基础 渲染(Render)定义 渲染在电脑绘图中是指软件从模型生成图像的过程,通俗讲就是在计算机里面给虚拟世界"拍照".渲染主要分为两种,一种是预渲染(pre-ren ...

  5. 用 python 解决线性代数中的矩阵运算

    用 python 解决线性代数中的矩阵运算 矩阵叉乘 矩阵求逆 矩阵转置 假定AX=B,求解未知矩阵X 矩阵的行列式值|matrix| 未完待续..... import sys from PyQt5. ...

  6. PTA 7-1 公路村村通 (30分)

    PTA 7-1 公路村村通 (30分) 现有村落间道路的统计数据表中,列出了有可能建设成标准公路的若干条道路的成本,求使每个村落都有公路连通所需要的最低成本. 输入格式: 输入数据包括城镇数目正整数N ...

  7. [第二章]c++学习笔记5（构造函数和析构函数调用时机）

    示例函数 注:输出并不一定从main函数开始,如全局对象的初始化在main函数前执行,如构造函数中存在输出,则从构造函数的输出开始 此处6被类型转换构造函数的存在转换为临时对象赋值,而在这个过程结束后 ...

  8. Python基础（dict与set）

    #和list比较,dict有以下几个特点: #查找和插入的速度极快,不会随着key的增加而变慢: #需要占用大量的内存,内存浪费多. #dict1 = {'傻狗1':100,'傻狗2':200,'傻狗 ...

  9. Python 数据类型常用的内置方法（三）

    目录 Python 数据类型常用的内置方法(三) 1.列表内置方法 1.sort():升序 2.reverse():颠倒顺序 3.列表比较运算 2.字典内置方法 1.对Key的操作 2.len( )- ...

  10. 解决一个无聊的问题，如何处理Java用户在dos被收集信息时拷贝带换行符的文本信息造成的while的多次循环（java解决Scanner.next在接收用户输入时出现多个换行的形况）[解决方案一]

    问题描述: 用户在dos窗口输入的时候(web项目不会出现这样的问题,所以这个问题日常碰不到),摁下回车时,Scanner对象的next()扫描用户输入的文本,后面就可以根据输入的字符串进行判断,并执 ...