以下是一个很贱很简单的一个 在网页上图拽图片并预显示的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. cf22A Second Order Statistics（STL-UNIQUE的使用）

    题意: N个数,找出第二大的数.如果没有输出-1. 思路: UNIQUE的使用. 代码: int a[105]; int n; int main(){ cin>>n; rep(i,0,n- ...

  2. c#复制数组的多种方法

    方法一:使用for循环 int []pins = {9,3,7,2} int []copy = new int[pins.length]; for(int i =0;i!=copy.length;i+ ...

  3. Linux 文本三剑客之 awk

    Linux 系统中一切皆文件. 文件是个文本.可以读.可以写,如果是二进制文件,还能执行. 在使用Linux的时候,大都是要和各式各样文件打交道.熟悉文本的读取.编辑.筛选就是linux系统管理员的必 ...

  4. Python基础入门（2）- python中的数据类型

    python数据类型 什么是数据类型? 将数据分类,能有效的被电脑识别 为什么会有多种数据类型? 为了适应更多的使用场景,将数据划分为多种类型,每一种类型都有着各自的特点和使用场景,帮助计算机高效的处 ...

  5. 监控框架 - prometheus - 参数指标

    基于SpringBoot2.0+ Actuator metrics的监控(基于Oracle JDK9,G1) 引言 SpringBoot2在spring-boot-actuator中引入了microm ...

  6. VUE的MVVM框架解析

    这篇文章主要介绍了MVVM模式中ViewModel和View.Model有什么区别?本文分别解释了它们的功能和作用,然后总结了它之间的区别,需要的朋友可以参考下 Model:很简单,就是业务逻辑相关的 ...

  7. 我罗斯方块最终篇（Player类、Game类）

    我罗斯方块最终篇(Player类.Game类) |--------------------项目GitHub地址--------------------| 目录 我罗斯方块最终篇(Player类.Gam ...

  8. layui 如果调用 from 内嵌入的 iframe子页面方法

    (人笨,占时想法的办法,不要骂,不要骂,怕了怕了,想到别的会来改的) 父页面; <%@ page language="java" contentType="text ...

  9. [atARC071F]Infinite Sequence

    注意到当$a_{i}\ne 1$且$a_{i+1}\ne 1$,那么$\forall i<j,a_{j}=a_{i+1}$(证明的话简单归纳就可以了) 令$f_{i}$表示在题中条件下,还满足$ ...

  10. 4、使用SetOperations（无序）操作redis（Set集合）

    文章来源:https://www.cnblogs.com/shiguotao-com/p/10560599.html 方法 c参数 s说明 Long add(K key, V... values); ...