h5实现本地图片或文件的上传
首先放一个今天学到的小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实现本地图片或文件的上传的更多相关文章
- AFNetworking 文件上传Data,File图片,文件等上传
一:AFNetworking的文件上传: 主要几个以下类似 - (BOOL)appendPartWithFileURL:(NSURL *)fileURL name:(NSString *)name e ...
- C# WinForm 富文本编辑器 用kindeditor实现本地图片只选取不上传到编辑器
以下资料有参考网上其它童鞋作品,原作者看到务喷!!!! 以下资料有参考网上其它童鞋作品,原作者看到务喷!!!! 重要的事只要说两遍... 网上找了几天关于WinForm富文本编辑效果都不理想,各种坑, ...
- 【Android】图片(文件)上传的请求分析结构
怎么在android中上传文件,即怎么用Java向服务器上传文件.上传图片,这是个老问题了,在网上能搜到现成的代码,很多朋友用起来也比较熟了,但是为什么这么写,可能很多朋友并不清楚,这篇文章就来分析一 ...
- Servlet+Jsp实现图片或文件的上传功能
首先,我们创建一个新的web工程,在工程的WebRoot目录下新建一个upload文件夹,这样当我们将该工程部署到服务器上时,服务器便也生成个upload文件夹,用来存放上传的资源. 然后,在WebR ...
- PHP实现图片(文件)上传
这几天整理做过的php项目,感觉这个经常会用到,传上来共享一下咯 首先,前端界面 1.表单的首行需要加上enctype="multipart/form-data",需要上传的图片必 ...
- jQuery+php实现ajax文件即时上传
很多项目中需要用到即时上传功能,比如,选择本地图片后,立即上传并显示图像.本文结合实例讲解如何使用jQuery和PHP实现Ajax即时上传文件的功能,用户只需选择本地图片确定后即实现上传,并显示上传进 ...
- 使用HttpClient实现文件的上传下载
1 HTTP HTTP 协议可能是现在 Internet 上使用得最多.最重要的协议了,越来越多的 Java 应用程序需要直接通过 HTTP 协议来访问网络资源. 虽然在 JDK 的 java.net ...
- 利用webuploader实现超大文件分片上传、断点续传
之前仿造uploadify写了一个HTML5版的文件上传插件,没看过的朋友可以点此先看一下~得到了不少朋友的好评,我自己也用在了项目中,不论是用户头像上传,还是各种媒体文件的上传,以及各种个性的业务需 ...
- java HTTP文件断点上传
之前仿造uploadify写了一个HTML5版的文件上传插件,没看过的朋友可以点此先看一下~得到了不少朋友的好评,我自己也用在了项目中,不论是用户头像上传,还是各种媒体文件的上传,以及各种个性的业务需 ...
随机推荐
- WebGL或OpenGL关于模型视图投影变换的设置技巧
目录 1. 具体实例 2. 解决方案 1) Cube.html 2) Cube.js 3) 运行结果 3. 详细讲解 1) 模型变换 2) 视图变换 3) 投影变换 4) 模型视图投影矩阵 4. 存在 ...
- 林业资源遥感航拍监测GIS系统
航拍监测.遥感监测在林业有害生物(松材线虫病监测).森林防火监测.森林滥砍滥伐.林地侵占.林地违规开发监测等方面应用,将大大提升林业资源监测水平, 针对已有森林资源大量流失,滥砍滥伐现象普遍存在的事实 ...
- python自定义pi函数的代码
下边内容是关于python自定义pi函数的内容. def pi(): # Compute digits of Pi. # Algorithm due to LGLT Meertens. k, a, b ...
- 一种解决Android studio 3.0 Build报错的方法
问题背景: 最近在开始使用AndroidStudio3.0,刚好有一个开源的项目(Material-Movies),需要学习下.因为该项目比较早(2015年),而这段时间AndroidStudio和G ...
- 通用HttpClientUtil工具类
package com.*.utils; import java.io.IOException; import java.net.URI; import java.util.ArrayList; im ...
- Git - git status - 查看当前仓库状态
索引: 目录索引 参看代码 GitHub: git.txt 一.示例: git status 二.说明: 1."status" 部分 该命令可以查出当前分支文件变更状态, 可以查出 ...
- TiDB 架构及设计实现
一. TiDB的核心特性 高度兼容 MySQL 大多数情况下,无需修改代码即可从 MySQL 轻松迁移至 TiDB,分库分表后的 MySQL 集群亦可通过 TiDB 工具进行实时迁移. 水平弹性扩展 ...
- Ubuntu 16.04 屏幕亮度无法调节怎么办
安装好ubuntu 16.04之后,发现屏幕超亮,找不到调节按钮,这应该是系统的一个漏洞, 不过可以安装工具来操作,从而解决亮度调节问题,下面是安装 Brightness Controller 的方 ...
- coursea机器学习课程作业
coursea机器学习课程作业 一 关于此课程 课程地址 图片来自网络 1.官网课程地址传送 2.如果访问官网速度较慢可以上 B站课程地址 机器学习是一门研究在非特定编程条件下让计算机采取行动的学科. ...
- windows下mysql 5.7以上版本安装及遇到的问题
(原) 早些前用window安装mysql挺简单的,一个安装程序,一路下一步. 2006的5.0版本,确实太早了点. 于是官网上又下了一个版本,windows也是提供了二个版本Installer(安装 ...