以下是一个很贱很简单的一个 在网页上图拽图片并预显示的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. Spring Security OAuth2 单点登录

    1. OAuth 2.0 OAuth(Open Authorization)为用户资源的授权提供了一个安全的.开放而又简易的标准.最简单的理解,我们可以看一下微信OAuth2.0授权登录流程: 通过O ...

  2. SSH服务器拒绝了密码。请再试一次。怎么改都不行

    使用Xshell连接服务器,之前还好好的,突然之间就报"SSH服务器拒绝了密码.请再试一次"的错误. 1.检查 检查了IP.连接端口.用户.密码.网络是否正确? 本机情况:能够pi ...

  3. Go defer 原理和源码剖析

    Go 语言中有一个非常有用的保留字 defer,它可以调用一个函数,该函数的执行被推迟到包裹它的函数返回时执行. defer 语句调用的函数,要么是因为包裹它的函数执行了 return 语句,到达了函 ...

  4. Linux驱动实践：带你一步一步编译内核驱动程序

    作 者:道哥,10+年嵌入式开发老兵,专注于:C/C++.嵌入式.Linux. 关注下方公众号,回复[书籍],获取 Linux.嵌入式领域经典书籍:回复[PDF],获取所有原创文章( PDF 格式). ...

  5. python实现图片的ROI（region of interest）和泛洪填充

    目录: (一)ROI操作 (1)获取感兴趣区域(2)还原操作 (二)泛洪填充floodFill 正文: (一)ROI操作 感兴趣区(Region of Interest,ROIs) 是图像的一部分,它 ...

  6. [loj3049]字符串问题

    考虑将所有A串向所能支配的B串连边,B串向满足B串是A串前缀的A串连边,在A串上有点权,跑最长路即可但这样前缀的边太多,考虑优化:在后缀树上,将这些串插入进去(注意相同的串A串要在B串下面),并将父亲 ...

  7. mysql密码忘记如何恢复(windows/liunx版本:mysql-8.0.27)

    windows/liunx版本:mysql-8.0.27参考官网文档: https://dev.mysql.com/doc/refman/8.0/en/resetting-permissions.ht ...

  8. 雇工模式（Employee Pattern）

    本文节选自<设计模式就该这样学> 1 雇工模式的定义 雇工模式(Employee Pattern)也叫作仆人模式(Servant Pattern),属于行为型设计模式,它为一组类提供通用的 ...

  9. mybatis一对多查询resultMap只返回了一条记录

    问题描述:因为领导的一个需求,需要用到使用resultMap,很久没使用了,结果就除了点意外.就记录下这个问题 准备两个类:author(作者)和book(书),数据库创建对应的author-> ...

  10. Python+selenium之多窗口，句柄