以下是一个很贱很简单的一个 在网页上图拽图片并预显示的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. Windows7下面手把手教你安装Django - Hongten

    我所使用的操作系统是Windows7,内存是2G 在搜索了一些资料发现,对于Django的安装,详细的真的很少,都说的很简化,然而,这篇blog可以手把手教你成功安装Django 对于Django的详 ...

  2. 『动善时』JMeter基础 — 56、JMeter使用命令行模式生成HTML测试报告

    目录 1.自动生成HTML图形化报告 2.使用已有的测试结果文件生成HTML报告 3.HTML图形化报告内容详解 (1)Dashboard页面:(重点查看) (2)Charts页面:(辅助分析) 4. ...

  3. MySQL:由于找不到VCRUNTIME140_1.dll，无法继续执行代码。重新安装程序可能会解决此问题

    我只是搬用工,记录一下 方法一: 安装这个微软常用运行库合集(https://www.repaik.com/), 链接:https://pan.baidu.com/s/1r4JJaUKjw-y1g3l ...

  4. 聊一聊声明式接口调用与Nacos的结合使用

    背景 对于公司内部的 API 接口,在引入注册中心之后,免不了会用上服务发现这个东西. 现在比较流行的接口调用方式应该是基于声明式接口的调用,它使得开发变得更加简化和快捷. .NET 在声明式接口调用 ...

  5. C# 合并两个数组总结

    byte[] b1 = new byte[] { 1, 2, 3, 4, 5 }; byte[] b2 = new byte[] { 6, 7, 8, 9 }; byte[] b3 = new byt ...

  6. JAVA学习（七）

    今天讲师又讲了一个多小时类的注意点,例如书写格式什么的,这些我c++中都学过了,所以很快看完. 然后又讲了IDE,我选择的是IntelliJ IDEA. 刚开始官网登不上去,花了一个小时,从网上翻了各 ...

  7. C++概述及知识点总结

    经过一段时间的学习,以前从没有接触过C++这个高逼格的语言的小白,逐渐对C++有了更深的了解和认识,C++是c语言的升级版,Bjarne Stroustrup在剑桥大学计算机中心工作.他使用过Simu ...

  8. 18.jvm调优工具及案例分析

    目标: Jmap.Jstack.Jinfo详解 JvisualVm调优工具实战 JVM内存或CPU飙高如何定位 JState命令预估JVM运行情况 系统频繁Full GC导致系统卡顿实战调优 内存泄漏 ...

  9. [loj3333]混合物

    假设选择的调味瓶为$k_{1}<k_{2}<...<k_{s}$,即判定是否存在正有理数解$\{x_{1},x_{2},...,x_{s}\}$,满足$$(\sum_{i=1}^{s ...

  10. 统计学习2：线性可分支持向量机(Scipy实现)

    1. 模型 1.1 超平面 我们称下面形式的集合为超平面 \[\begin{aligned} \{ \bm{x} | \bm{a}^{T} \bm{x} - b = 0 \} \end{aligned ...