以下是一个很贱很简单的一个 在网页上图拽图片并预显示的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. 当src获取不到图片，onerror可指定一张默认的图片

    <img src="img/789.png" onerror="javascript:this.src='img/123.png';" alt=" ...

  2. Get value from agent failed: cannot connect to [[127.0.0.1]:10050]: [111] Connection refused

    zabbix 监控连接失败 1.查看配置文件端口,server端口10051开启正常,agent端10050开启正常 2.查看/var/log/zabbix/zabbix_server.log./va ...

  3. centos7 二进制安装mysql-8.0.19

    安装包下载地址:https://dev.mysql.com/get/Downloads/MySQL-8.0/mysql-8.0.19-linux-glibc2.12-x86_64.tar.xz 1.检 ...

  4. JS数据类型转换问题

    一.数据类型的转换 数据类型的转换方法 强制转换(显示转换,主动转换) 字符转数值 parseInt(要转换的数值或变量) 转整数 从左向右依次转换,遇到第一个非数字的字符,停止转换 忽略小数点后的内 ...

  5. silky微服务业务主机简介

    目录 主机的概念 通用主机 web主机 业务主机类型 使用web主机构建微服务应用 使用通用主机构建微服务应用 构建具有websocket能力的微服务应用 构建网关 开源地址 在线文档 主机的概念 s ...

  6. redis批量操作

    由于redis没有批量删除命令,所以借助xargs redis-cli -h 127.0.0.1 keys testdata_2018* |xargs redis-cli -h 127.0.0.1 d ...

  7. Nginx面试题（总结最全面的面试题！！！）

    https://blog.csdn.net/weixin_43122090/article/details/105461971

  8. Django笔记&教程 4-2 模型（models）中的Field（字段）

    Django 自学笔记兼学习教程第4章第2节--模型(models)中的Field(字段) 点击查看教程总目录 参考:https://docs.djangoproject.com/en/2.2/ref ...

  9. xpath的chrome插件安装，xpath基本语法

    xpath插件安装: 注意:提前安装xpath插件 (1)打开chrome浏览器 (2)点击右上角小圆点 (3)更多工具 (4)扩展程序 (5)拖拽xpath插件到扩展程序中 (6)如果crx文件失效 ...

  10. laravel DB 类库

    DB 类操作数据库    基本用法: DB::table('tableName'); 获取操作tableName 表        增加信息        对数据库中的某个表增加数据主要有两个函数可以 ...