js如何展示上传的图片
前言:本文章主要讲的是上传的图片如何展示在页面上。
一般来说,我们会先将本地图片上传到服务器,上传成功后,由后台返回图片的网络地址再在前端显示。但是,我今天讲的是不通过前面说的过程,而是直接使用js将上传的图片展示。
这种方法就是通过FileReader的readAsDataURL方法,我们可以不经过后台,直接将本地图片显示在页面上。这样做可以减少前后端频繁的交互过程,减少服务器端无用的图片资源。让我们来看看代码:
原生js代码将图片转换成base64(监听input的节点):
var input = document.getElementById("file"); // 获取input节点 input.onchange = function() {
var file = this.files[];
if (!!file) {
var reader = new FileReader(); // 图片文件转换为base64
reader.readAsDataURL(file);//用文件加载器加载文件
reader.onload = function() { // 显示图片
document.getElementById("file_img").src = this.result;//file_img是图片展示载体
}
}
}
const file = this.$refs.upload.files[];
const reader = new FileReader();
let _this = this;
reader.onload = function() {
_this.fileArr.push(reader.result);//fileArr是存储图片转换为base64的地址,然后可以通过v-for展示
};
reader.readAsDataURL(file);//用文件加载器加载文件
除了将图片转换成base64展示,还有另外一种方法:window.URL.createObjectURL(file)这种方法是把拿到图片的物理地址然后再展示。
js如何展示上传的图片的更多相关文章
- js 显示刚刚上传的图片 (onchange事件)
<table> <tr width="100"> <td>上传商场图片:</td> <td> <input typ ...
- js将用户上传gif动图分解成多张帧图片
js将用户上传gif动图分解成多张帧图片 写在前面 工作中遇到一个这么一个需求:这是一个多图上传的场景,如果用户上传选择多张图片,则上传后直接展示多张图片,如果上传的图片是gif动图,则需要分解这张动 ...
- ext js/Ext.Net_演示 htmleditor 上传&插入图片
本文内容 解决方案结构 HtmlEditor_Upload.js 脚本 HtmlEditorUploadImg.ashx 上传图片到服务器 演示 htmleditor 控件添加插入图片功能 解决方 ...
- PHP 多图上传,图片批量上传插件,webuploader.js,百度文件上传插件
PHP 多图上传,图片批量上传插件,webuploader.js,百度文件上传插件(案例教程) WebUploader作用:http://fex.baidu.com/webuploader/gett ...
- js上传压缩图片
原文链接:http://blog.csdn.net/iefreer/article/details/53039848 手机用户拍的照片通常会有2M以上,这对服务器带宽产生较大压力. 因此在某些应用下( ...
- ASP.NET、JAVA跨服务器远程上传文件(图片)的相关解决方案整合
一.图片提交例: A端--提交图片 protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { string u ...
- KindEditor上传本地图片在ASP.NET MVC的配置
http://www.cnblogs.com/upupto/archive/2010/08/24/1807202.html 本文解决KindEditor上传本地图片在ASP.NET MVC中的配置. ...
- .net mvc4 利用 kindeditor 上传本地图片
http://blog.csdn.net/ycwol/article/details/41824371?utm_source=tuicool&utm_medium=referral 最近在用k ...
- 解决uploadify多图片上传部分图片丢失,且不提示任何错误的问题
这两天用到uploadify的flash版本进行批量图片上传并生成缩略图的功能,之前用uploadify用的好好的,这次突然出现了一个奇怪的问题. 问题描述如下:当我选择单个图片上传的时候,图片上传都 ...
随机推荐
- Python控制函数运行时间
在某个Flask项目在做后端接口时需要设置超时响应,因为接口中使用爬虫请求了多个网站,响应时间时长时短. 我需要设置一个最大响应时间,时间内如果接口爬虫没跑完,直接返回请求超时. 从网上了解到有两种方 ...
- wdcp 开启某个Mysql数据库远程访问
wdcp 开启某个Mysql数据库远程访问 登录wdcp后台-Mysql管理-phpmyadmin 输入Mysql的root密码登录进入 示例代码: update mysql.user set hos ...
- golang学习之路
目录 go语言介绍 开发环境准备 go语言基础 Go语言常用标准库 数据库相关 前端相关 web开发 go语言介绍 为什么要学习go语言 开发环境准备 从零开始搭建Go语言开发环境 VS Code配置 ...
- 理解 Redux 的中间件
将该思想抽象出来,其实和 Redux 就无关了.问题变成,怎样实现在截获函数的执行,以在其执行前后添加自己的逻辑. 为了演示,我们准备如下的示例代码来模拟 Redux dispatch action ...
- 集合查询表--Map
查询表 Map接口java提供了一组可以以键值对(key-value)的形式存储数据的数据结构,这种数据结构成为Map.我们可以把Map看成一个多行两列的表格,其中第一列存放key,第二列存放valu ...
- Hadoop-2.7.3-本地模式安装-wordcount例子
准备虚拟机:linux-rhel-7.4-server,由于不使用虚拟机进行联网,所以选择host-only网络模式.此处,需要再VitralBox的管理菜单中的主机网络管理器新建一个虚拟网卡.安装完 ...
- CSS样式手册
字体属性:(font) 大小 {font-size: x-large;}(特大) xx-small;(极小) 一般中文用不到,只要用数值就可以,单位:PX.PD 样式 {font-style: obl ...
- python编程基础之十六
for in 循环,与其说是循环不如说精确点交遍历 for 变量名 in + 迭代对象 语句A else: 语句B 作用:一次访问迭代对象中的元素并赋值给变量 循环终止时,执行else语句块,如果br ...
- 探讨Microsoft Solution Framework(MSF)框架下管理的秘密
hello,同学们,同胞们,同志们,同龄们,这样们,那样们,们们们,我又回来写“论文”了,半年时间没见我发布任何博文,是不是认为我被潜规则了啊,哈哈.我想死你们了.好了,废话不多说,进入今天主题: ...
- Flask框架整个流程源码解读
Flask框架整个流程源码解读 一.总的流程 运行Flask其本质是运行Flask对象中的__call__,而__call__本质调用wsgi_app的方法 wsgi_app方法 def wsgi_a ...