预览本地图片原生js
<!-- 样似总结:
用a标签代替file,做文件上传。 将file进行绝对定位,透明度设置为0;宽度为“上传图片”的宽度,超出部分隐藏。
这样做是为了将file隐藏起来。用a标签代替file
a标签变为块级元素,并且进行相对定位。
通过<input />标签,给它指定type类型为file,可提供文件上传;
accept:可选择上传类型,如:只要传图片,且不限制图片格式,为image/*;
multiple:规定是否可以选择多个文件;
规定只可上传图片,且可以选择多个文件
https://blog.csdn.net/chen357313771/article/details/40583163?utm_source=app 样似参看
-->
<style>
.imgview{
width: 150px;
height: 150px;
border-radius: 50%;
border: 1px solid red;
}
.a{
position: relative;
display: block;
text-decoration: none;
color: aqua;
}
.fileopen{
position: absolute;
left: 0;
top: 0;
opacity: 0;
filter: alpha(opacity=0);
width: 64px;
overflow: hidden;
}
</style>
<a href="javascript:void(0);" class="a"><input type="file" class="fileopen">上传图片</a>
<img src="" alt="" class="imgview" accept="image/png, image/jpeg, image/gif, image/jpg">
<script> var input = document.querySelector("input"); //当选择完成图片之后调用
input.onchange = function(){
//1. 拿到fileinput里面的文件, 这个file是一个file对象, file对象不能直接展示的
var file =input.files[0];
console.log(file); //2. 读取文件,成功img标签可以直接使用的格式
//FileReader类就是专门用来读文件的
var reader = new FileReader(); //3. 开始读文件
//readAsDataURL: dataurl它的本质就是图片的二进制数据, 进行base64加密后形成的一个字符串, 这个字符串可以直接作用img标签的图片资源使用 reader.readAsDataURL(file); //4. 因为文件读取是一个耗时操作, 所以它在回调函数中,才能够拿到读取的结果
reader.onload = function() {
console.log(reader.result);
//直接使用读取的结果
document.querySelector("img").src = reader.result;
}
document.querySelector("img").src = file;
} </script>
预览本地图片原生js的更多相关文章
- IE7+ 浏览器兼容预览本地图片
css #preview_fake { filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale); o ...
- vue预览本地图片
<template> <div> <a href="javascript:void(0);" @change="addImage" ...
- javascript预览本地图片
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- jquery预览本地图片
本人qq群也有许多的技术文档,希望可以为你提供一些帮助(非技术的勿加). QQ群: 281442983 (点击链接加入群:http://jq.qq.com/?_wv=1027&k=29Lo ...
- 基于HTML5的可预览多图片Ajax上传
一.关于图片上传什么什么的 在XHTML的时代,我们使用HTML file控件上传图片一次只能上传一张.要一次上传多图,做法是借助于flash.例如swfupload.js.可惜,使用复杂的点,比如f ...
- input type=file实现图片上传,预览以及图片删除
背景 前两天在做一个PC网站的意见反馈,其中涉及到了图片上传功能,要求可以上传多张图片,并且支持图片上传预览及图片删除, 图片上传这一块以前没怎么搞过,而且一般也很少会碰到这样的需求,所以在做这个功能 ...
- 移动端 H5 拍照 从手机选择图片,移动端预览,图片压缩,图片预览,再上传服务器
前言:最近公司的项目在做全网营销,要做非微信浏览器的wap 站 的改版,其中涉及到的一点技术就是采用H5 选择手机相册中的图片,或者拍照,再将获取的图片进行压缩之后上传. 这个功能模块主要有这5点比较 ...
- es5预览本地文件、es6练习代码演示案例
es6简单基础: <!DOCTYPE html> <html> <head> <meta name="viewport" content= ...
- 小程序 canvas实现图片预览,图片保存
wxml 代码: <view class="result-page"> <canvas bindtap="previewImage" canv ...
随机推荐
- python网络爬虫之解析网页的BeautifulSoup(爬取电影图片)[三]
目录 前言 一.BeautifulSoup的基本语法 二.爬取网页图片 扩展学习 后记 前言 本章同样是解析一个网页的结构信息 在上章内容中(python网络爬虫之解析网页的正则表达式(爬取4k动漫图 ...
- ruby读写文件的方法
读文件 #Ruby 读取文件 #方法一 file = File.open("/Users/Desktop/demo.txt","r") while line = ...
- 一起学SpringMVC之RequestMapping详解
本文以一个简单的小例子,简述SpringMVC开发中RequestMapping的相关应用,仅供学习分享使用,如有不足之处,还请指正. 什么是RequestMapping? RequestMappin ...
- Android使用ActivityLifecycleCallbacks管理Activity和区分App前后台
一.ActivityLifecycleCallbacks接口介绍 官方地址:https://developer.android.com/reference/android/app/Applicatio ...
- JS Timing
JS Timing 通过使用 JavaScript,我们有能力做到在一个设定的时间间隔之后来执行代码,而不是在函数被调用后立即执行.我们称之为计时事件. JavaScript 计时事件 通过使用 Ja ...
- 004.Windows Server 故障转移群集 (WSFC)简介
一 WSFC 简介 1.1 WSFC 概述 “Windows Server 故障转移群集”(WSFC) 群集是一组独立的服务器,它们共同协作以提高应用程序和服务的可用性.SQL Server 2012 ...
- CG-CTF SQL注入
SQL注入1 题目 访问题目网址 先查看一下源码 仔细分析一下核心源码 <?php if($_POST[user] && $_POST[pass]) { //判断user和pas ...
- JavaScript-----11.预解析
1.预解析 1.1引子 //1问 console.log(num);//报错 num未定义 //2问 console.log(num); //undefined 未报错 var num = 10; / ...
- 多线程编程学习七( Fork/Join 框架).
一.介绍 使用 java8 lambda 表达式大半年了,一直都知道底层使用的是 Fork/Join 框架,今天终于有机会来学学 Fork/Join 框架了. Fork/Join 框架是 Java 7 ...
- C和C++常见误区以及问题整理
c和c++的关系 c是面向过程的语言,c++是在c的基础上扩展的面向对象的编程语言. c++具备c的所有功能,对c的库完全兼容. c++的标准在98年确定,在那之前已经有一些库大量使用. 新标准中,推 ...