原生JS实现图片上传并预览功能
<!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>原生实现图片预览功能</title>
</head>
<body>
<label for="file">点击上传文件</label>
<input id="file" onchange="uploadFiles()" accept="image/png,image/jpeg" type='file' multiple />
<div class="preview">
<p>No files currently selected for upload</p>
</div>
<script>
const input = document.querySelector('input');
input.style.opacity = 0;
function uploadFiles() {
const files = input.files; // 从元素的files属性获取文件列表
const preview = document.querySelector('.preview');
while(preview.firstChild) { // 每次都清空原有列表
preview.removeChild(preview.firstChild);
}
const ol = document.createElement('ol');
preview.appendChild(ol);
for(let file of files) {
const li = document.createElement('li');
const newLi = showFiles(file, li, preview);
preview.appendChild(newLi);
}
}
function showFiles(file, li) {
const { name, size, type } = file;
const isValidate = validateFileType(type)
if (isValidate) {
const img = document.createElement('img');
img.src = window.URL.createObjectURL(file); //***生成文件路径,添加到img的src
const sizeChanged = getSize(size);
const textContent = document.createTextNode(name + ': ' + sizeChanged);
li.appendChild(textContent);
li.appendChild(img);
} else {
const textContent = document.createTextNode("InValide File Type");
li.appendChild(textContent);
}
return li;
}
function getSize(size) { // 按照用户习惯计算大小
if (size<1024) {
return size + 'byte';
} else if (size<1048576) {
return (size/1024).toFixed(1) + 'KB';
} else {
return (size/1048576).toFixed(1) + 'MB';
}
}
const fileTypes = ['image/png', 'image/jpeg'];
function validateFileType(type) { // 验证文件类型
if (!fileTypes.includes(type)) {
return false;
}
return true;
}
</script>
</body>
</html>
原生JS实现图片上传并预览功能的更多相关文章
- 一、简单的图片上传并预览功能input[file]
一.简单的图片上传并预览功能input[file] <!DOCTYPE html> <html lang="en"> <head> <me ...
- js实现图片上传及预览---------------------->>兼容ie6-8 火狐以及谷歌
<head runat="server"> <title>图片上传及预览(兼容ie6/7/8 firefox/chrome)</title> & ...
- js实现图片上传本地预览
演示地址:https://xibushijie.github.io/static/uploadImg.html <!DOCTYPE> <html> <head> & ...
- input file实现多选,限制文件上传类型,图片上传前预览功能
限制上传类型 & 多选:① accept 属性只能与 <input type="file" /> 配合使用.它规定能够通过文件上传进行提交的文件类型. ② mu ...
- 基于jquery实现图片上传本地预览功能
一.原理 分为两步: 当上传图片的input被触发并选择本地图片之后获取要上传的图片这个对象的URL(对象URL),把对象URL赋值给事先写好的img标签的src属性即可把图片显示出来.在这里,我们需 ...
- JS兼容各个浏览器的本地图片上传即时预览效果
JS兼容各个浏览器的本地图片上传即时预览效果 很早以前 在工作曾经碰到这么一个需求,当时也是纠结了很久,也是google了很久,没有碰到合适的demo,今天特意研究了下这方面的的问题,所以也就做了个简 ...
- jQuery:[1]实现图片上传并预览
jQuery:[1]实现图片上传并预览 原理 预览思路 1.当上传对象的input被触发并选择本地图片之后获取要上传的图片对象的URL: 2.把对象URL赋值给实现写好的img标签的src属性 Fil ...
- html之file标签 --- 图片上传前预览 -- FileReader
记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...
- 图片上传本地预览。兼容IE7+
基于JQUERY扩展,图片上传预览插件 目前兼容浏览器(IE 谷歌 火狐) 不支持safari 预览地址:http://www.jinbanmen.com/test/1.html js代码:/**名称 ...
随机推荐
- 2019ICPC南昌网络赛总结
打的很崩的一场比赛.上来签到题我就wa了一发,感觉在梦游.然后我开了H题,队友开B题,f(n)=3f(n-1)+2f(n)傻子都知道矩阵快速幂,但是1e7的强制在线必须把logn优化,然后试图打表寻找 ...
- WUSTOJ 1274: 喂,这里是帅帅的LCM(Java)
1274: 喂,这里是帅帅的LCM 题目 在一组数中,找出个数为奇数的数.更多内容点击标题. 分析 其实这种题并不难,做过一次之后,绝对不会错第二次.通过读题可以发现,我们要找的那个数在这一堆 ...
- STM32固件库模板下载以及固件库学习方法
固件库模板下载 固件库模板新建过程: 下载我们上节的固件库文件 电脑新建一个文件夹命名为Fwlib-Template,在此文件夹下分别新建DOC Libraries Project User 这四个文 ...
- S03_CH08_DMA_LWIP以太网传输
S03_CH08_DMA_LWIP以太网传输 8.1概述 本例程详细创建过程和本季课程第一课<S03_CH01_AXI_DMA_LOOP 环路测试>非常类似,因此如果读者不清楚如何创建工程 ...
- asp.net core-2.在vs2017中创建asp.net core应用程序
今天我们用vs2017创建一个asp.net core 的应用程序,打开vs2017 点击:文件—>项目,选择asp.net core web 应用程序 点击确定 红框内就昨天用控制台去创建的应 ...
- 2019牛客多校三 A. Graph Games (图分块)
大意: 给定无向图, 定义$S(x)$为$x$的邻接点集合. 每次操作翻转$[L,R]$范围的边, 询问$S(x)$与$S(y)$是否相等. 快速判断集合相等可以用$CF 799F$的技巧. 采用$h ...
- [jquery]ajax最最常用的七个属性
1.url 类型:String 默认值: 当前页地址.发送请求的地址. 2.data 类型:String 发送到服务器的数据.将自动转换为请求字符串格式.GET 请求中将附加在 URL 后.查看 pr ...
- .netcore项目中使用log4net
log4net配置文件 引入log4net包,创建一个config目录,专门用来放配置文件,添加log4net.config文件. 编写配置文件. <?xml version="1.0 ...
- spring源码(1)---idea基础环境搭建
一.环境准备 1. jdk1.8.1 做java开发的这个应该能自己找到 2.gradle-4.9 https://services.gradle.org/distributions/ 没用过grad ...
- 使用 keytool 生成安卓应用程序签名
下载 keytool jar包: 解压jar包到固定目录 如: cd /Library/Java/JavaVirtualMachines/ 进入到jar包目录: cd /Library/Java/J ...