<!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. prach定点化处理

  2. 第70届（2019）IMO中国国家队选拔考试试题

    (几何除外)1,几何,略2,给定n≥3,是否存在无穷个2n元集{a1,...,an,b1,...,bn}满足其中元素整体互素,a1,...,an成等差数列,b1,...,bn也成等差数列.3,给定k, ...

  3. C# 修改/新建判断

    //查询有无重复(新建用) public List<bloodBreedDetailsEntity> CodeList(string code) { var expression = Ex ...

  4. 【C语言】两个乒乓球队进行比赛，各出三人。甲队为a,b,c三人，乙队为x,y,z三人。已抽签决定比赛名单。有人向队员打听比赛的名单，a说他不和x比，c说他不和x,z比，编写程序找出三对赛手名单。

    问题分析:假设a是A的对手,b是B的对手,c是C的对手,a,b,c分别是x,y,z之一,且a,b,c互不相等,同时还要满足条件a!= 'x'&&c != 'x'&&c ...

  5. SQLserver中存储图片

    两种方式1.存放图片路径2.转换成2进制流(不过这样的话将很占用数据库空间)存路径的方式就很简单了,下面着重给出转换成2进制流的存入以及读取方法.存入:string FilePath="&q ...

  6. Unable to create initial connections of pool. spring boot mysql

    Unable to create initial connections of pool. 在链接url里添加 将useSSL=true改为useSSL=false 只能说明服务器没有打开SSL功能

  7. Spring与RestHighLevelClient

    Elasticsearch连接方式有两种:分别为TCP协议与HTTP协议 最近使用es比较多,之前使用一直是使用spring封装的spring-data-elasticsearch:关于spring- ...

  8. Xlrd模块读取Excel文件数据

    Xlrd模块使用 excel文件样例:

  9. 在GPU上训练数据

    在GPU上训练数据 模型搬到GPU上 数据搬到GPU上 损失函数计算搬到GPU上

  10. 关于按下ctrl+z后，之后的cin失效的问题

    下面这代码按下Ctrl+z结束while输入后,接下来的cin >> val2就无法输入了 #include <iostream> #include <vector> ...