<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <meta http-equiv="X-UA-Compatible" content="ie=edge" />

    <title>upload by form</title>

  </head>

  <body>

    <input type="file" name="avatar" id="avatar" multiple="multiple" />

    <img id="img" />

  </body>

  <script>

    window.onload = () => {

      const avatar = document.getElementById("avatar");

      const img = document.getElementById("img");

      avatar.onchange = e => {

        const file = e.target.files[0];

        //创建读取文件的对象

        const reader = new FileReader();

        //使用该对象读取file文件

        reader.readAsDataURL(file);

        //读取文件成功后执行的方法函数

        reader.onload = function(e) {

          //读取成功后返回的一个参数e，整个的一个进度事件

          //选择所要显示图片的img，要赋值给img的src就是e中target下result里面

          //的base64编码格式的地址

          img.src = e.target.result;

        };

      };

    };

  </script>

</html>

图片上传 一张展示，base64图片获取的更多相关文章

  1. 图片上传前 压缩，base64图片压缩 Exif.js处理ios拍照倒置等问题

    曾写过在前端把图片按比例压缩不失真上传服务器的前端和后台,可惜没有及时做总结保留代码,只记得js利用了base64位压缩和Exif.js进行图片处理,还有其中让我头疼的ios拍照上传后会倒置等诸多问题 ...

  2. ASP.NET Core 简单实现七牛图片上传（FormData 和 Base64）

    ASP.NET Core 简单实现七牛图片上传(FormData 和 Base64) 七牛图片上传 SDK(.NET 版本):https://developer.qiniu.com/kodo/sdk/ ...

  3. 小程序实现图片上传，预览以及图片base64位处理

    最近一段时间在做小程序项目,第一期功也完工了.需要好好总结一下经验,把项目中遇到的问题好好总结一下,遇到的问题,踩过的坑.今天写一个小程序实现图片上传,预览,以及删除,图片base64位处理.下面就是 ...

  4. angularjs图片上传和预览 base64

    angularjs图片上传和预览 思路是从file中读取base64 Module.controller('controlName', ['$scope', '$http', function($sc ...

  5. MVC微信浏览器图片上传（img转Base64）

    因公司业务需要,需要做一个微信公众号里的图片上传功能,主要用到的技术就是 img转base64 上到服务器 话不多说, 贴代码 先看前端显示出来的东西 OK 图片不重要,看代码 <!--微信图片 ...

  6. 配置django图片上传与保存展示

    近来在研究django,发现有好多好玩的功能,比如图片上传,以前处理这个比较麻烦,现在我们来看看如何来处理图片上传与保存 1.在数据库设计的时候需要配置upload_to image = models ...

  7. input type=file实现图片上传，预览以及图片删除

    背景 前两天在做一个PC网站的意见反馈,其中涉及到了图片上传功能,要求可以上传多张图片,并且支持图片上传预览及图片删除, 图片上传这一块以前没怎么搞过,而且一般也很少会碰到这样的需求,所以在做这个功能 ...

  8. 阿里云OSS图片上传plupload.js结合jq-weui 图片上传的插件

    项目中用到了oss上传,用的plupload,奈何样式上不敢恭维,特别是放在移动端上使用.于是自己把它移植到了jq weui的上传图片组件上. 更改:选择照片后确认即及时上传至oss服务器,不限制上传 ...

  9. asp.net多图片上传同时保存对每张图片的描述

    前台aspx //图片预览和描述 function previewImage(file) { var div = document.getElementById('preview'); div.inn ...

随机推荐

  1. Win10安装3 —— U盘启动工具安装

    本文内容皆为作者原创,如需转载,请注明出处:https://www.cnblogs.com/xuexianqi/p/12364593.html 一:准备一个空U盘 U盘容量推荐至少8个G,先提前备份好 ...

  2. SVM-支持向量机（二）非线性SVM分类

    非线性SVM分类 尽管SVM分类器非常高效,并且在很多场景下都非常实用.但是很多数据集并不是可以线性可分的.一个处理非线性数据集的方法是增加更多的特征,例如多项式特征.在某些情况下,这样可以让数据集变 ...

  3. thinkphp5出现mkdir() Permission denied报错解决办法

    如果没有runtime目录,则需要手动创建一个,并且给runtime添加权限: mkdir runtime chmod -R 777 runtime 报错如下:

  4. 占位 DL

    占位 DL include: DL404

  5. php 对接国外支付 ipay88支付

    ipay88支付 近期接了一个国外的项目,客户指定要这种支付,就搞搞呗,其实流程和思路都是差不多的,往下看 他的流程其实非常简单  下面的流程仔细看看,看懂了就会了 1 首先我们需要先获取下单所需要的 ...

  6. docker在windows下和linux下网络底层的一些区别

    windows和linux下的docker运行时的网络结构是有区别的 a.windows下,默认使用Hyper-v创建一个linux虚拟机,承载docker.所以从外向内的路径为: windows - ...

  7. c# 嵌入资源并读取

    原文:c# 嵌入资源并读取 1. 右键点击项目,选择资源,然后选择资源的类型,插入资源. 2. 这时候在项目的目录树上会出现一个Resource的文件夹,找到嵌入的资源文件,右击属性,在 Build ...

  8. 《NVMe-over-Fabrics-1_0a-2018.07.23-Ratified》阅读笔记（3）-- 命令

    3 命令 Fabrics命令用于创建队列和初始化controller.Fabrics命令的Opcode字段填写0x7F.无论controller是否处于使能状态(CC.EN)Fabrics命令都会被处 ...

  9. 实现ENSP模拟器与物理主机、虚拟机通信

    一.环境描述 我需要实现华为模拟器中的网络设备和物理主机.虚拟机通信.这篇文章中以ENSP中的路由器为例,实现它和物理主机.虚拟机的通信.  二.实现方法 在ENSP中借助Cloud来实现. 在Clo ...

  10. D3新学习

    1. Python Web(1):建立第一个Web项目 直接将d3 index.html代码拷贝进index.html中即可. 2. D3入门教程; D3.js的v5版本入门教程