JS原生上传文件,读取文件格式,控制文件只可以上传某些格式,并使用fileReader转换格式
本文为代码片段记录,方便后期使用哇!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.myitem-one-list {
width: 500px;
}
.ng-star-inserted {
text-align: center;
}
.fileinput-button {
position: relative;
/* // display: inline-block; */
overflow: hidden;
cursor: pointer;
}
.fileinput-button input {
position: absolute;
right: 0px;
top: -20px;
opacity: 0;
-ms-filter: 'alpha(opacity=0)';
font-size: 50px;
}
</style>
</head>
<body>
<div style="padding:20px;display:flex">
<div style="text-align: center;display:inline-block;overflow: hidden;">
<span class=" fileinput-button">
<span style="display:inline-block;line-height: 30px">点击上传文件</span>
<input type="file" onChange="readExcel()" id="myfile01" />
</span>
</div>
</div>
<div>
</div>
<script>
function readExcel() {
let files = document.getElementById('myfile01').files
console.log(files);
if (files.length <= 0) {//如果没有文件名
return false;
} else if (!/\.(xls|xlsx|jpg)$/.test(files[0].name.toLowerCase()) || errorFileSize(files[0], '1MB')) {
console.log('上传格式不正确,请上传xls或者xlsx、jpg格式,且文件大小不得超过1mb');
return false;
}
const fileReader = new FileReader();
fileReader.onload = (ev) => {
try {
const data = ev.target.result;
console.log(data)
// 这里可以写其他操作啦
} catch (e) {
console.log('出错了')
return false;
}
};
fileReader.readAsDataURL(files[0]);
// readAsArrayBuffer(file): void 异步按字节读取文件内容,结果用ArrayBuffer对象表示
// readAsBinaryString(file): void 异步按字节读取文件内容,结果为文件的二进制串
// readAsDataURL(file): void 异步读取文件内容,结果用data: url的字符串形式表示
// readAsText(file, encoding): void 异步按字符读取文件内容,结果用字符串形式表示
}
/**
* 限制文件大小,返回 true代表文件格式有误
* @param {File} file 文件
* @param {String} limitSize 限制大小
* 使用方法:limitFileSize(files[0], '1MB')
*/
function errorFileSize(file, limitSize) {
var arr = ["KB", "MB", "GB"]
var limit = limitSize.toUpperCase();
var limitNum = 0;
for (var i = 0; i < arr.length; i++) {
var leval = limit.indexOf(arr[i]);
if (leval > -1) {
limitNum = parseInt(limit.substr(0, leval)) * Math.pow(1024, (i + 1))
break
}
}
if (file.size > limitNum) {
return true
}
return false
}
</script>
</body>
</html>
JS原生上传文件,读取文件格式,控制文件只可以上传某些格式,并使用fileReader转换格式的更多相关文章
- 【RMAN】Oracle中如何备份控制文件?备份控制文件的方式有哪几种?
真题1. 如何备份控制文件?备份控制文件的方式有哪几种? 答案:备份控制文件的方式有多种. ① 备份控制文件可以在线进行: SQL> ALTER DATABASE BACKUP CONTROLF ...
- HTML中上传与读取图片或文件(input file)----在路上(25)
input file相关知识简例 在此介绍的input file相关知识为: 上传照片及文件,其中包括单次上传.批量上传.删除照片.增加照片.读取图片.对上传的图片或文件的判断,比如限制图片的张数.限 ...
- bootstrap fileinput实现限制图片上传数量及如何控制分批多次上传
废话没有,直奔主题 问题点: fileinput提供了一个maxFileCount用于限制图片上传的数量,设置maxFileCount为1时,一次性选择超过一张会有如下提示: 当选择一张,不点上传,再 ...
- js - 原生ajax访问后台读取数据并显示在页面上
1.前台调用ajax访问后台方法,并接收数据 <%@ page contentType="text/html;charset=UTF-8" language="ja ...
- 关于Npoi+excel文件读取,修改文件内容的处理方式
因最近有需求场景,实现对文件的读写操作,又不单独生成新的文件,对于源文件的修改,做了一个简单实现,如下↓ // 要操作的excel文件路径 string fileName = Server.MapPa ...
- springboot的@Configuration文件读取static静态文件
错误 正确
- 文件读取及比较&文件信息保存
#include <stdio.h> #include <stdlib.h> //#include <regex.h> char* file_name_1 = &q ...
- VAuditDemo-任意文件读取
任意文件读取是属于文件操作漏洞的一种. 一般任意文件读取漏洞可以读取配置信息.甚至系统重要文件. 严重的话,就可能导致SSRF,进而漫游内网. 文件操作漏洞 任意文件删除--删除lock 任意文件复制 ...
- 仿jQuery的siblings效果的js原生代码
仿jQuery的siblings效果的js原生代码 <previousSibling> 属性返回选定节点的上一个同级节点(在相同树层级中的前一个节点). <nextSibling&g ...
随机推荐
- LcdTools如何导出内置画面为bmp图片
运行LcdTools,先设置好图片所需分辨率参数,点击"画面设置"栏,修改下图所示参数 点击"画面设置"栏,在"画面资源"栏找到需要导出的画 ...
- Trino Worker 规避 OOM 思路
背景 Trino 集群如果不做任何配置优化,按照默认配置上线,Master 和 Worker 节点都很容易发生 OOM.本文从 Trino 内存设计出发, 分析 Trino 内存管理机制,到限制与优化 ...
- HDFS基础学习
HDFS简介 HDFS即Hadoop Distributed File System,是一个分布式文件系统,用于存储海量数据.一个HDFS集群由一个NameNode和多个DataNode组成. HDF ...
- Python数据分析:实用向
文件处理 导包 import pandas as pd import numpy as np import matplotlib.pyplot as plt import seaborn as sns ...
- netty系列之:来,手把手教你使用netty搭建一个DNS tcp服务器
目录 简介 搭建netty服务器 DNS服务器的消息处理 DNS客户端消息请求 总结 简介 在前面的文章中,我们提到了使用netty构建tcp和udp的客户端向已经公布的DNS服务器进行域名请求服务. ...
- SQLSever事务
1. 为什么要使用事务? 当一个存储过程或多个SQL语句(指代insert.update.delete类型)依次执行时候, 如果其中一条或几条发生错误,但是其他的还会继续执行,会造成数据的不一致,非常 ...
- Vue3 —— 组件练习题(附源码)
一.定义一个vue分页组件,实现客户端分页功能 1.1.子组件A(页数按钮) <!-- 本组件用于遍历分页的页数按钮 --> <template lang=""& ...
- 2022春每日一题:Day 35
题目:[NOI Online #1 提高组] 冒泡排序 看到范围这么大,求逆序对,有修改,估计也只能树状数组了,考查冒泡排序性质,排第i次冒泡排序,总逆序对个数会减少i的逆序对个数,然后交换两个数,他 ...
- DL账号密码生命周期信息流图
- django 多 APP urls的实现
项目下urls.py 引入admin from django.contrib import admin 引入path,include from django.urls import path,incl ...