web前端图片上传(3)--filereader
这篇文章主要是为了介绍一种文件上传的方式。当然文件中是包含图片的。如果大家仔细看我的第一篇web前端图片上传(1)就会知道,其实也是按照这种方式上传你的,但是由于上次时间比较紧张,没有详细的介绍今天的主角filereader对象。今天就来好好的看看他。
以下是他常用的几种方法。
- abort none 中断读取
- readAsBinaryString file(blob) 将文件读取为二进制码
- readAsDataURL file(blob) 将文件读取为 DataURL
- readAsText file, (blob) 将文件读取为文本
但是这个可能不好理解是吧。咱们直接上程序,看看程序中是怎么运行的。我期中会加上自己的注释,方便大家查询。同样的,这段程序直接放在编辑器里面,然后直接运行就好了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>FileReader</title>
</head>
<body>
<p>
<label>请选择一个文件:</label>
<input type="file" id="file" />
<input type="button" value="读取图像" onclick="readAsDataURL()" />
<input type="button" value="读取二进制数据" onclick="readAsBinaryString()" />
<input type="button" value="读取文本文件" onclick="readAsText()" />
</p>
<div id="result" name="result"></div>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
var result = document.getElementById("result");
var file = document.getElementById("file");
//判断浏览器是否支持FileReader接口
if(typeof FileReader == 'undefined') {
result.InnerHTML = "<p>你的浏览器不支持FileReader接口!</p>";
//使选择控件不可操作
file.setAttribute("disabled", "disabled");
}
function readAsDataURL() {
//检验是否为图像文件
//var file = document.getElementById("file").files[0];//js的写法,也可以写成jquery的
var file = $("#file").prop("files")[0];//jquery的写法
if(!/image\/\w+/.test(file.type)) {
alert("看清楚,这个需要图片!");
return false;
}
var reader = new FileReader();
//将文件以Data URL形式读入页面
reader.readAsDataURL(file);
reader.onload = function(e) {
console.log(this.result);
var result = document.getElementById("result");
//显示文件
result.innerHTML = '<img src="' + this.result + '" alt="" />';
}
} function readAsBinaryString() {
var file = document.getElementById("file").files[0];
var reader = new FileReader();
//将文件以二进制形式读入页面
reader.readAsBinaryString(file);
reader.onload = function(f) {
console.log(f);
console.log(this.result);
var result = document.getElementById("result");
//显示文件
result.innerHTML = this.result;
}
} function readAsText() {
var file = document.getElementById("file").files[0];
var reader = new FileReader();
//将文件以文本形式读入页面
reader.readAsText(file);
reader.onload = function(f) {
var result = document.getElementById("result");
//显示文件
result.innerHTML = this.result;
}
}
</script>
</body>
</html>
这里说下程序中的28行和29行,是js和jq的两种写法,而且jq中只能写porp,写attr是会报错的,不知道是不是我的jq版本的问题。
readAsDataURL()这个方法其实就是把这个文件转换成为了base64的格式,如果是中图片的话,那就是图片的base64格式。
readAsText()这个方法就是读取成为文本,如果你上传的是一个txt的文件,那么是直接可以读出来你们的文本信息的,但是doc文档格式是不可以的。当然了,html的格式是可以的。
至于51行和52行的打印,是为了看到,究竟是哪个是咱们需要的文件格式,发现了,this.result才是咱们需要的东西。而里面的f并不是。f.target.result这个才是咱们需要的字段。 最后还是附上我前两篇文章的链接吧。方便大家查阅。web前端图片上传(1),web前端图片上传(2)
web前端图片上传(3)--filereader的更多相关文章
- web前端图片上传
图片上传有很多种形式,但是听说ios只能传字符串,所以为了安卓.ios和web能用一个接口上传图片,采用了基于base64 的方法上传图片. 下面是我的html <div class=" ...
- web前端图片上传(2)
今天发现了一种ajax上传图片的方式,是以前没有用过的,首先来说下为什么要用这种方式.是因为原来后台是用的form表单的方式来提交表单数据的.但是觉得呢,这种方式不太好,因为要刷新页面,前台只用控制台 ...
- 七牛云存储的 Javascript Web 前端文件上传
因为我的个人网站 restran.net 已经启用,博客园的内容已经不再更新.请访问我的个人网站获取这篇文章的最新内容,七牛云存储的 Web 前端文件上传 七牛是不错的云存储产品,特别是有免费的配额可 ...
- Web Api 图片上传,在使用 Task.ContinueWith 变量无法赋值问题
细谈 Web Api 图片上传,在使用 Task.ContinueWith 变量无法赋值问题的解决办法! 在使用Asp.Net Web Api 图片上传接口的时候,到网上找了一些个例子,但大多数找 ...
- Asp.Net Core Web Api图片上传(一)集成MongoDB存储实例教程
Asp.Net Core Web Api图片上传及MongoDB存储实例教程(一) 图片或者文件上传相信大家在开发中应该都会用到吧,有的时候还要对图片生成缩略图.那么如何在Asp.Net Core W ...
- 细谈 Web Api 图片上传,在使用 Task.ContinueWith 变量无法赋值问题的解决办法!
在使用Asp.Net Web Api 图片上传接口的时候,到网上找了一些个例子,但大多数找到都是这个版本! [HttpPost] public Task<Hashtable> ImgUpl ...
- php $_FILES错误说明 以及图片前端图片上传失败。
我的另一个原文:https://blog.csdn.net/qq_36570464/article/details/80692241 今天被一个问题弄了好久, 先看代码: 前端: <form m ...
- java web开发 图片上传功能
基本思路在于,配置路径,然后用java I/O的api将图片上传到该目录下. String photoPath = ServletActionContext.getServletContext( ...
- Web前端文件上传进度的显示
跟后台关系不大,主要是前端js实现,具体使用了XMLHttpRequest的ProgressEvent事件,可以参考MDN中的Using XMLHttpRequest https://develope ...
随机推荐
- Java的多态浅谈
概述 Java的四大基本特性:抽象,封装,继承和多态.其中,抽象,封装,继承可以说多态的基础,而多态是封装,继承的具体表现.如果非要用专业术语来描述什么是多态的话 多态是指程序中定义的引用变量所指向具 ...
- SpringCloud学习系列之二 ----- 服务消费者(Feign)和负载均衡(Ribbon)使用详解
前言 本篇主要介绍的是SpringCloud中的服务消费者(Feign)和负载均衡(Ribbon)功能的实现以及使用Feign结合Ribbon实现负载均衡. SpringCloud Feign Fei ...
- 你必须知道的 SmartSql !
介绍 SmartSql = MyBatis + Cache(Memory | Redis) + R/W Splitting +Dynamic Repository + Diagnostics .... ...
- C# 错误:空对象不能转换为值类型
最近在做项目的时候出现了一个错误 当从数据库中获取值的时候 报错:空对象不能转换为值类型 因为数据库你查询数据的时候不是所有的字段都是存在数据的,有些字段可能是Null值,也就是没有数据 当你在类型转 ...
- Mybaits-plus实战(二)
1. Mybaits-plus实战(二) 1.1. mybatis-plus插件 1.1.1. 用法 先举个例子介绍用法,如下:直接作为Bean注入,一般来讲插件太多印象性能,所以大部分插件都只在测试 ...
- 结合JDK源码看设计模式——单例模式
定义: 保证一个类仅有一个实例,并提供一个全局访问点 适用场景: 确保任何情况下这个对象只有一个实例 详解: 私有构造器 单利模式中的线程安全+延时加载 序列化和反序列化安全, 防止反射攻击 结合JD ...
- 设计模式之组合模式——Java语言描述
组合模式又叫做部分整体模式,适用于把一组相似的对象当作一个单一的对象.组合模式依据树形结构来组合对象,用来表示部分以及整体层次 介绍 意图 将对象组合成树形结构以表示"部分-整体" ...
- 【Teradata SQL】一个字段为空即取另外一个字段(连续取4个字段)-case when
目标:如果col1为空则取col2的值,如果col2也为空则取col3的值,如果col3还为则取col4的值,如果四个字段均为空则取默认值 1.数据准备 create multiset table t ...
- 不带parent指针的successor求解
问题: 请设计一个算法,寻找二叉树中指定结点的下一个结点(即中序遍历的后继).给定树的根结点指针TreeNode* root和结点的值int p,请返回值为p的结点的后继结点的值.保证结点的值大于等于 ...
- MVC详解:mvc是什么?为什么要用MVC?MVC工作原理以及MVC优缺点
一.什么是MVC Model:模型层 View:视图层 Controller:控制层 MVC (Modal View Controler)本来是存在于Desktop程序中的,M是指数据模型,V是指用户 ...