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

一般来说,我们会先将本地图片上传到服务器,上传成功后,由后台返回图片的网络地址再在前端显示。但是,我今天讲的是不通过前面说的过程,而是直接使用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. java虚拟机体系分析

      一.JVM的生命周期: 1)程序开始执行,他就运行,程序停止,它就结束.有几个程序在执行,就有几个虚拟机在工作.只要Java虚拟机中还有普通的线程在执行,Java虚拟机就不会停止. 2)Java虚 ...

  2. 本次作业统一标题:C语言I博客作业02

    这个作业属于哪个课程 C语言程序设计1 这作业要求在哪里 https://edu.cnblogs.com/campus/zswxy/CST2019-2/homework/8655 我在这个课程的目标是 ...

  3. 你也可以写聊天程序 - C# Socket学习1

    简述 我们做软件工作的虽然每天都离不开网络,可网络协议细节却不是每个人都会接触和深入了解.我今天就来和大家一起学习下Socket,并写一个简单的聊天程序. 一些基础类 首先我们每天打开浏览器访问网页信 ...

  4. idea tomcat提示Unable to ping server at localhost:1099

    idea启动tomcat报错Unable to ping server at localhost:1099 是 IDEA配置的jdk版本 与 tomcat的jdk版本不配导致的

  5. Redis系列总结--这几点你会了吗?

    文章原创于公众号:程序猿周先森.本平台不定时更新,喜欢我的文章,欢迎关注我的微信公众号. 前面几篇已经对Redis中几个关键知识点做了介绍,本篇主要对Redis系列做一下总结以及对Redis中常见面试 ...

  6. jsp JavaBean el表达式

    JSP三大指令 一个jsp页面中,可以有0~N个指令的定义! 1. page --> 最复杂:<%@page language="java" info="xx ...

  7. idea 新建项目 coding上新建项目 idea推送到coding

    1. 注册coding a. 首先在(https://coding.net)上创建项目 ps:跳过注册 ![file](https://img2018.cnblogs.com/blog/1416679 ...

  8. 02-19 k近邻算法(鸢尾花分类)

    [TOC] 更新.更全的<机器学习>的更新网站,更有python.go.数据结构与算法.爬虫.人工智能教学等着你:https://www.cnblogs.com/nickchen121/ ...

  9. 02-21 决策树ID3算法

    目录 决策树ID3算法 一.决策树ID3算法学习目标 二.决策树引入 三.决策树ID3算法详解 3.1 if-else和决策树 3.2 信息增益 四.决策树ID3算法流程 4.1 输入 4.2 输出 ...

  10. 【JZOJ5329】-时间机器

    [JZOJ5264]化学 Description Input Output Sample Input 3 10 1 2 10 Sample Output 5 Hint 题解: 这个题目又是一道贪心题, ...