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为什么推荐使用多进程
最近在看Python的多线程,经常我们会听到老手说:“Python下多线程是鸡肋,推荐使用多进程!”,但是为什么这么说呢? 要知其然,更要知其所以然.所以有了下面的深入研 ...
- Merge into 语句实例
/*Merge into 详细介绍MERGE语句是Oracle9i新增的语法,用来合并UPDATE和INSERT语句.通过MERGE语句,根据一张表或子查询的连接条件对另外一张表进行查询,连接条件匹配 ...
- IDEA 学习笔记之 Python项目开发
Python项目开发: 下载Python: https://www.python.org/downloads/release/python-363/ 安装Python: 配置环境变量(path): C ...
- BootstrapVue 安装指南
BootstrapVue 是基于 Bootstrap v4 + Vue.js 的前端 UI 框架.BootstrapVue 作为学习 Vue.js 框架本身的入门框架,我认为是非常不错的.Bootst ...
- 从零开始入门 K8s | 可观测性:你的应用健康吗?
作者 | 莫源 阿里巴巴技术专家 一.需求来源 首先来看一下,整个需求的来源:当把应用迁移到 Kubernetes 之后,要如何去保障应用的健康与稳定呢?其实很简单,可以从两个方面来进行增强: 首先是 ...
- Network in Network(2013),1x1卷积与Global Average Pooling
目录 写在前面 mlpconv layer实现 Global Average Pooling 网络结构 参考 博客:blog.shinelee.me | 博客园 | CSDN 写在前面 <Net ...
- ELK日志分析系统(4)-elasticsearch数据存储
1. 概述 logstash把格式化的数据发送到elasticsearch以后,elasticsearch负责存储搜索日志数据 elasticsearch的搜索接口还是很强大的,这边不详细展开,因为k ...
- div模拟select/option解决兼容性问题及增加可拓展性
个人博客: http://mcchen.club 想到做这个模拟的原因是之前使用select>option标签的时候发现没有办法操控option的很多样式,比如line-height等,还会由此 ...
- 新建springmvc配置文件
新建spring或springmvc的配置文件时,需要先加入spring-bean-4.3.18.RELEASE.jar包,当然可以是其他版本,这样就可以在资源目录下,比如resources(Reso ...
- MySQL视图的优缺点以及如何创建视图
视图,虚拟表,从一个表或多个表中导出来的表,作用和真实表一样,包含一系列带有行和列的数据 视图中,用户可以使用SELECT语句查询数据,也可以使用INSERT,UPDATE,DELETE修改记录,视图 ...