<!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. MPI Maelstrom POJ - 1502 floyd

    #include<cstdio> #include<cstdlib> #include<cstring> #include<iostream> usin ...

  2. Microsoft Visual Studio 显示行号

    工具下面有一个选项

  3. @HystrixCommand 不能被导包

    添加pom文件 <dependency>  <groupId>com.netflix.hystrix</groupId>  <artifactId>hy ...

  4. Spring域属性自动注入byName和byType

    byName 方式 <!--byName约束:bean当中的域属性名必须跟所注入bean的id相同--> <bean id="student" class=&qu ...

  5. MyEclipse-2017破解过程

    下载 myeclipse2017百度云下载路径: 链接:https://pan.baidu.com/s/1wQYwO2zrUvbbUcjCB5B8IQ 密码:6igu myeclipse2017破解文 ...

  6. 在macOS 上添加 JAVA_HOME 环境变量

    If you are planing to develop Java Apps on your Mac, you may have to set $JAVA_HOME environment vari ...

  7. clone()与clone(true)的用法

    clone() 方法生成被选元素的副本,包含子节点.文本和属性. 使用 clone(true) 方法在clone()的基础上还包括克隆元素的事件处理器.

  8. springboot整合websocket实现客户端与服务端通信

    定义  WebSocket是通过单个TCP连接提供全双工(双向通信)通信信道的计算机通信协议.此WebSocket API可在用户的浏览器和服务器之间进行双向通信.用户可以向服务器发送消息并接收事件驱 ...

  9. Hello world-初识C++

    刚开始学习编程时,都是以输出Hello world开始的 用C++编写程序输出Hello world如下: #include<iostream>using namespace std;in ...

  10. ASP.NET Process Model之二：ASP.NET Http Runtime Pipeline - Part II

    https://www.cnblogs.com/artech/archive/2007/09/13/891266.html 二.ASP.NET Runtime Pipeline(续ASP.NET Ht ...