首先放一个今天学到的小demo:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试</title>
<style>
* {
margin: 0;
padding: 0;
} .myImg {
width: 200px;
} #imgs {
width: 500px;
height: 500px;
background-color: cornsilk;
margin: 50px auto;
}
</style>
</head>
<body> <div id="imgs" ondragover="allowDrop(event)" ondrop="dropImg(event)"> </div> <script>
//禁用掉浏览器掉默认行为
function allowDrop(e) {
e.preventDefault();
}
//当拖放结束时调用:
function dropImg(e) {
//禁用掉浏览器掉默认行为
e.preventDefault();
//data为获取到的文件,只能在ondrop中得到
var data = e.dataTransfer.files;
//获取多个文件时,遍历文件,判断文件是否为我们所要求的类型,并做出处理
for (var i = 0; i < data.length; i++) {
//判断文件类型,indexOf()的结果假为-1,真为0
var myType = data[i].type;
console.log(myType.indexOf('image'));
if (myType.indexOf('image') === 0) {
//FileReader为html5中封装的方法,用于将文件读入内存,并读取文件中的数据
var reader = new FileReader();
//读取拖入文件的DataURL,无返回值。
reader.readAsDataURL(data[i]);
//读取文件成功时触发
reader.onload = function () {
//this.result为当前文件的base64解码
//console.log(this.result);
//创建一个img节点并添加到当前框内
var img = document.createElement("img");
img.src = this.result;
img.className = "myImg";
document.getElementById("imgs").appendChild(img);
};
//无论是否成功读取时都会触发,用来弹出错误或上传数据
reader.onloadend = function () {
//如果上传出错
if (reader.error) {
alert(reader.error);
} else {
//可以进行与服务器的上传交互
}
}
} else {
//如果传入的非图片格式
alert("请上传图片!");
} }
console.log(data);
}
</script>
</body>
</html>

  效果大家可以试一下,每一步的注释也有写。下面具体说一下:

  因为这里的div相当于一个被拖入对象,我们想要实现的效果是图片拖入时把图片呈现出来。而浏览器在解读到图片放入时默认行为是解析图片并显示。这显然不会是我们想要的效果。所以需要禁用掉浏览器对当前事件的默认行为也就是:preventDefault();

  下面就是编写当图片放入时的函数,这里又一个点。是HTML5中的fileAPI,为我们提供了很大的便利。

  根据我们打印出来的结果:

  我们可以看到,根据dataTransfe.filesr我们可以看到所选的文件列表,有兴趣的同学可以具体百度,我这里就不详细介绍了。

HTML5还提供了FileReader接口:用于将文件读入内存,并读取文件中的数据。

  var reader = new FileReader();

  

该接口总共有四个方法和六个事件:
 •readAsBinaryString(file):读取文件为二进制
 •readAsDataURL(file):读取文件DataURL
 •readAsText(file,[encoding]):读取文件为文本
 •about(none):中断文件读取 
===================================================
 •onabort:读取文件中断时触发
 •onerror:读取文件出错时触发
 •onloadstart:读取文件开始时触发
 •onprogress:读取文件中时一直触发
 •onload:读取文件成功时触发
 •onloadend:读取文件结束时触发(成功和失败都会触发)
以上事件参数e有e.target.result或this.result指向读取的结果。

拖放API:  

拖放属性:将需要拖放的元素的dragable属性设置为true(dragable=”true”)【img元素和a元素默认可以拖放。】

拖放事件:(分为拖放元素事件和目标元素事件)

拖放元素事件:
 •dragstart:拖拽前触发 
 •drag ,拖拽前、拖拽结束之间,连续触发
 •dragend , 拖拽结束触发 
目标元素事件:
 •dragenter , 进入目标元素触发
 •dragover ,进入目标、离开目标之间,连续触发
 •dragleave , 离开目标元素触发
 •drop , 在目标元素上释放鼠标触发 
但是,需要注意的是:在目标元素中dragover和drop事件中要阻止默认行为(拒绝被拖放),否则拖放不能被实现!

=======================================================================================

DataTransfer对象:专门用于存放拖放时要携带的数据,可以被设置为拖放事件的dataTransfer属性。

三个属性:

•effectAllowed : 设置光标样式(none, copy, copyLink, copyMove, link, linkMove, move, all 和 uninitialized)
 •effectAllowed:设置拖放操作的视觉效果
 •types:存入数据的种类,字符串的伪数组
 •files:获取外部拖拽的文件,返回一个fileList列表,filesList下有个type属性,返回文件的类型

4个方法:

•setData() : 设置数据 key和value(必须是字符串)
 •getData() : 获取数据,根据key值,获取对应的value
 •clearData():清除DataTransfer对象存放的数据
 •setDragImage(imageUrl,log x,long y):用img元素来设置拖放图标

    var dt=e.dataTransfer;//作为拖放事件的dataTransfer属性
dt.effectAllowed='copy';//设置光标样式
dt.setData('text/plain','hello');//设置拖放文字
dt.setDragImage(dragIcom,-10,-10);//设置拖放图标

h5实现本地图片或文件的上传的更多相关文章

  1. AFNetworking 文件上传Data,File图片,文件等上传

    一:AFNetworking的文件上传: 主要几个以下类似 - (BOOL)appendPartWithFileURL:(NSURL *)fileURL name:(NSString *)name e ...

  2. C# WinForm 富文本编辑器 用kindeditor实现本地图片只选取不上传到编辑器

    以下资料有参考网上其它童鞋作品,原作者看到务喷!!!! 以下资料有参考网上其它童鞋作品,原作者看到务喷!!!! 重要的事只要说两遍... 网上找了几天关于WinForm富文本编辑效果都不理想,各种坑, ...

  3. 【Android】图片(文件)上传的请求分析结构

    怎么在android中上传文件,即怎么用Java向服务器上传文件.上传图片,这是个老问题了,在网上能搜到现成的代码,很多朋友用起来也比较熟了,但是为什么这么写,可能很多朋友并不清楚,这篇文章就来分析一 ...

  4. Servlet+Jsp实现图片或文件的上传功能

    首先,我们创建一个新的web工程,在工程的WebRoot目录下新建一个upload文件夹,这样当我们将该工程部署到服务器上时,服务器便也生成个upload文件夹,用来存放上传的资源. 然后,在WebR ...

  5. PHP实现图片(文件)上传

    这几天整理做过的php项目,感觉这个经常会用到,传上来共享一下咯 首先,前端界面 1.表单的首行需要加上enctype="multipart/form-data",需要上传的图片必 ...

  6. jQuery+php实现ajax文件即时上传

    很多项目中需要用到即时上传功能,比如,选择本地图片后,立即上传并显示图像.本文结合实例讲解如何使用jQuery和PHP实现Ajax即时上传文件的功能,用户只需选择本地图片确定后即实现上传,并显示上传进 ...

  7. 使用HttpClient实现文件的上传下载

    1 HTTP HTTP 协议可能是现在 Internet 上使用得最多.最重要的协议了,越来越多的 Java 应用程序需要直接通过 HTTP 协议来访问网络资源. 虽然在 JDK 的 java.net ...

  8. 利用webuploader实现超大文件分片上传、断点续传

    之前仿造uploadify写了一个HTML5版的文件上传插件,没看过的朋友可以点此先看一下~得到了不少朋友的好评,我自己也用在了项目中,不论是用户头像上传,还是各种媒体文件的上传,以及各种个性的业务需 ...

  9. java HTTP文件断点上传

    之前仿造uploadify写了一个HTML5版的文件上传插件,没看过的朋友可以点此先看一下~得到了不少朋友的好评,我自己也用在了项目中,不论是用户头像上传,还是各种媒体文件的上传,以及各种个性的业务需 ...

随机推荐

  1. WebGL或OpenGL关于模型视图投影变换的设置技巧

    目录 1. 具体实例 2. 解决方案 1) Cube.html 2) Cube.js 3) 运行结果 3. 详细讲解 1) 模型变换 2) 视图变换 3) 投影变换 4) 模型视图投影矩阵 4. 存在 ...

  2. 林业资源遥感航拍监测GIS系统

    航拍监测.遥感监测在林业有害生物(松材线虫病监测).森林防火监测.森林滥砍滥伐.林地侵占.林地违规开发监测等方面应用,将大大提升林业资源监测水平, 针对已有森林资源大量流失,滥砍滥伐现象普遍存在的事实 ...

  3. python自定义pi函数的代码

    下边内容是关于python自定义pi函数的内容. def pi(): # Compute digits of Pi. # Algorithm due to LGLT Meertens. k, a, b ...

  4. 一种解决Android studio 3.0 Build报错的方法

    问题背景: 最近在开始使用AndroidStudio3.0,刚好有一个开源的项目(Material-Movies),需要学习下.因为该项目比较早(2015年),而这段时间AndroidStudio和G ...

  5. 通用HttpClientUtil工具类

    package com.*.utils; import java.io.IOException; import java.net.URI; import java.util.ArrayList; im ...

  6. Git - git status - 查看当前仓库状态

    索引: 目录索引 参看代码 GitHub: git.txt 一.示例: git status 二.说明: 1."status" 部分 该命令可以查出当前分支文件变更状态, 可以查出 ...

  7. TiDB 架构及设计实现

    一. TiDB的核心特性 高度兼容 MySQL 大多数情况下,无需修改代码即可从 MySQL 轻松迁移至 TiDB,分库分表后的 MySQL 集群亦可通过 TiDB 工具进行实时迁移. 水平弹性扩展 ...

  8. Ubuntu 16.04 屏幕亮度无法调节怎么办

    安装好ubuntu 16.04之后,发现屏幕超亮,找不到调节按钮,这应该是系统的一个漏洞, 不过可以安装工具来操作,从而解决亮度调节问题,下面是安装  Brightness Controller 的方 ...

  9. coursea机器学习课程作业

    coursea机器学习课程作业 一 关于此课程 课程地址 图片来自网络 1.官网课程地址传送 2.如果访问官网速度较慢可以上 B站课程地址 机器学习是一门研究在非特定编程条件下让计算机采取行动的学科. ...

  10. windows下mysql 5.7以上版本安装及遇到的问题

    (原) 早些前用window安装mysql挺简单的,一个安装程序,一路下一步. 2006的5.0版本,确实太早了点. 于是官网上又下了一个版本,windows也是提供了二个版本Installer(安装 ...