前言:本文章主要讲的是上传的图片如何展示在页面上。

一般来说,我们会先将本地图片上传到服务器,上传成功后,由后台返回图片的网络地址再在前端显示。但是,我今天讲的是不通过前面说的过程,而是直接使用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是图片展示载体
      }
    }
  }
  vue代码将图片转换成base64(在input使用@change绑定):
  

  

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如何展示上传的图片的更多相关文章

  1. js 显示刚刚上传的图片 (onchange事件)

    <table> <tr width="100"> <td>上传商场图片:</td> <td> <input typ ...

  2. js将用户上传gif动图分解成多张帧图片

    js将用户上传gif动图分解成多张帧图片 写在前面 工作中遇到一个这么一个需求:这是一个多图上传的场景,如果用户上传选择多张图片,则上传后直接展示多张图片,如果上传的图片是gif动图,则需要分解这张动 ...

  3. ext js/Ext.Net_演示 htmleditor 上传&插入图片

    本文内容 解决方案结构 HtmlEditor_Upload.js 脚本 HtmlEditorUploadImg.ashx 上传图片到服务器 演示 htmleditor 控件添加插入图片功能   解决方 ...

  4. PHP 多图上传,图片批量上传插件,webuploader.js,百度文件上传插件

    PHP  多图上传,图片批量上传插件,webuploader.js,百度文件上传插件(案例教程) WebUploader作用:http://fex.baidu.com/webuploader/gett ...

  5. js上传压缩图片

    原文链接:http://blog.csdn.net/iefreer/article/details/53039848 手机用户拍的照片通常会有2M以上,这对服务器带宽产生较大压力. 因此在某些应用下( ...

  6. ASP.NET、JAVA跨服务器远程上传文件(图片)的相关解决方案整合

    一.图片提交例: A端--提交图片 protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { string u ...

  7. KindEditor上传本地图片在ASP.NET MVC的配置

    http://www.cnblogs.com/upupto/archive/2010/08/24/1807202.html 本文解决KindEditor上传本地图片在ASP.NET MVC中的配置. ...

  8. .net mvc4 利用 kindeditor 上传本地图片

    http://blog.csdn.net/ycwol/article/details/41824371?utm_source=tuicool&utm_medium=referral 最近在用k ...

  9. 解决uploadify多图片上传部分图片丢失,且不提示任何错误的问题

    这两天用到uploadify的flash版本进行批量图片上传并生成缩略图的功能,之前用uploadify用的好好的,这次突然出现了一个奇怪的问题. 问题描述如下:当我选择单个图片上传的时候,图片上传都 ...

随机推荐

  1. Python控制函数运行时间

    在某个Flask项目在做后端接口时需要设置超时响应,因为接口中使用爬虫请求了多个网站,响应时间时长时短. 我需要设置一个最大响应时间,时间内如果接口爬虫没跑完,直接返回请求超时. 从网上了解到有两种方 ...

  2. wdcp 开启某个Mysql数据库远程访问

    wdcp 开启某个Mysql数据库远程访问 登录wdcp后台-Mysql管理-phpmyadmin 输入Mysql的root密码登录进入 示例代码: update mysql.user set hos ...

  3. golang学习之路

    目录 go语言介绍 开发环境准备 go语言基础 Go语言常用标准库 数据库相关 前端相关 web开发 go语言介绍 为什么要学习go语言 开发环境准备 从零开始搭建Go语言开发环境 VS Code配置 ...

  4. 理解 Redux 的中间件

    将该思想抽象出来,其实和 Redux 就无关了.问题变成,怎样实现在截获函数的执行,以在其执行前后添加自己的逻辑. 为了演示,我们准备如下的示例代码来模拟 Redux dispatch action ...

  5. 集合查询表--Map

    查询表 Map接口java提供了一组可以以键值对(key-value)的形式存储数据的数据结构,这种数据结构成为Map.我们可以把Map看成一个多行两列的表格,其中第一列存放key,第二列存放valu ...

  6. Hadoop-2.7.3-本地模式安装-wordcount例子

    准备虚拟机:linux-rhel-7.4-server,由于不使用虚拟机进行联网,所以选择host-only网络模式.此处,需要再VitralBox的管理菜单中的主机网络管理器新建一个虚拟网卡.安装完 ...

  7. CSS样式手册

    字体属性:(font) 大小 {font-size: x-large;}(特大) xx-small;(极小) 一般中文用不到,只要用数值就可以,单位:PX.PD 样式 {font-style: obl ...

  8. python编程基础之十六

    for in 循环,与其说是循环不如说精确点交遍历 for 变量名 in + 迭代对象 语句A else: 语句B 作用:一次访问迭代对象中的元素并赋值给变量 循环终止时,执行else语句块,如果br ...

  9. 探讨Microsoft Solution Framework(MSF)框架下管理的秘密

    hello,同学们,同胞们,同志们,同龄们,这样们,那样们,们们们,我又回来写“论文”了,半年时间没见我发布任何博文,是不是认为我被潜规则了啊,哈哈.我想死你们了.好了,废话不多说,进入今天主题:   ...

  10. Flask框架整个流程源码解读

    Flask框架整个流程源码解读 一.总的流程 运行Flask其本质是运行Flask对象中的__call__,而__call__本质调用wsgi_app的方法 wsgi_app方法 def wsgi_a ...