<!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. 【kuangbin带你飞】 MST专题

    唉,被班级合唱和复变考试搞得心力交瘁.新算法学不进去,更新下吧 A - Til the Cows Come Home The Head Elder of the tropical island of ...

  2. 51Nod 1091 线段的重叠 （贪心）

    X轴上有N条线段,每条线段包括1个起点和终点.线段的重叠是这样来算的,[10 20]和[12 25]的重叠部分为[12 20]. 给出N条线段的起点和终点,从中选出2条线段,这两条线段的重叠部分是最长 ...

  3. 2019 LOL 全球总决赛

                                        FPS 牛逼 涅槃重生

  4. 安装postman时遇到“无法定位程序输入点 SetDefaultDllDirectories于动态链接库KERNEL32.dll 上.”的问题

    安装postman时遇到“无法定位程序输入点 SetDefaultDllDirectories于动态链接库KERNEL32.dll 上.”的问题 解决办法: 1.安装系统更新补丁KB2533623,下 ...

  5. int*v=newint[src.cols*4]

    在学习:使用OpenCV2.x计算图像的水平和垂直积分投影中,有下图一种代码: 对比上面两个代码对于同一张图片求得的结果会发现不同: 为什么会出现这个原因呢?不知道为啥这样初始化? 首先查看一下图片深 ...

  6. C#中常见的winform控件命名规范 转

    我们知道Button 常常简称为btn,那么Winform中的其它控件呢,这篇文章在C#的winform控件命名规范 的基础上对一些控件的名称的简称进行了整理. 1. 标准控件 NO. 控件类型简写 ...

  7. 《深入理解Java虚拟机》读书笔记十

    第十一章  晚期(运行期)优化 1.HotSpot虚拟机内的即时编译 解释器与编译器: 许多Java虚拟机的执行引擎在执行Java代码的时候都有解释执行(通过解释器执行)和编译执行(通过即时编译器产生 ...

  8. C++ 实例练习-替换原生数组

    C++ 实例练习-替换原生数组 main.cpp #include <stdio.h> #include "intarray.h" int main(int argc, ...

  9. Git-免密提交

    全局设置git免密提交,打开git-bash输入命令: git config credential.helper store --global 单独对某个项目仓库设置时不加  --global 设置之 ...

  10. 自动构建自己的ASP.NET Core基础镜像

    在开发过程中,我们可以根据自身情况来定制自己的基础镜像,以便加快CI\CD构建速度以及提高开发体验.这里我们就以ASP.NET Core的基础镜像为例来进行讲解. 本次教程代码见开源库:https:/ ...