您现在的位置是:首页 > Javascript
当前栏目
html/javascript实现简单的上传
2023-03-31 10:43:39 时间
一、 上传用到的按钮类型是type = file
二、 为了美化上传按钮,我们通常会自定义按钮,将默认的上传隐藏掉。
fileInputs.click() 触发上传按钮点击
三、 new FileReader()
读取文件内容方法:
readAsText() 读取文本文件,(可以使用Txt打开的文件)
readAsBinaryString(): 读取任意类型的文件,返回二进制字符串
readAsDataURL(): 方法可以将读取到的文件编码成DataURL ,可以将资料(例如图片、excel文件)内嵌在网页之中,不用放到外部文件
abort: 中断读取文件的状态的获取:(根据自身情况使用)
onabort:读取文件断片时触发
onerror:读取文件错误时触发
onload:文件读取成功时触发 (这里我就简单的用了onload)
onloadend:文件读取完毕之后,不管成功还是失败触发
onloadstart: 开始读取文件时触发
onprogress:读取文件过程中触发
为了更直观的看到区别,我为大家截取了reader上传前后的数据。(如下图)
reader对象上传前的数据:
上传后通过readAsDataURL处理后的数据:
四、 file文件
const fileInputs = document.querySelector('.fileDoms')
console.log("file文件",fileInputs.files)
五、完整的代码展示
<!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>上传</title>
</head>
<body>
<div class="upload">
<img src="" alt="" style="width: 200px;height:200px;background:red;">
<button>点击上传</button>
<input type="file" style="display:none" class="fileDoms" onchange="changeFile()"/>
</div>
</body>
<script>
let btn = document.querySelector(".upload button")
let img = document.querySelector(".upload img")
const fileInputs = document.querySelector('.fileDoms')
btn.onclick = btnclick
function btnclick(){
fileInputs.click()
}
function changeFile(){
console.log("上传")
let reader = new FileReader();
reader.readAsDataURL(fileInputs.files[0]);
reader.onload = function(a){
img.src = a.target.result; //等同于reader.result
console.log(a,reader,reader.result);
}
}
</script>
</html>
相关文章
- 想换号发现绑定了99个网站 一招教你轻松解绑
- 高手总结:大幅提高UI设计效率的8个实用技巧!
- 高手踩坑笔记:UI设计中的10条经验法则
- UI设计师需要学什么?来看高手总结的能力模型!
- 凭什么UI设计师工资就比其他设计师高
- 从超多案例中,我总结了 2020年值得关注的10个UI设计趋势
- 5G大幕拉开 中国芯片新兵“肉搏”美日六巨头能否突围?
- 对谈世界上早期的UI设计师:我们不止创造了汉堡图标
- 2019年6月网页设计师前端干货大合集
- 对支付平台架构设计的一些思考
- QQ轨迹刷屏:一流的起牌,二流的牌技,三流的营销
- 谷歌开发团队招募Node.js移植工程师 Fuchsia有望支持JavaScript应用
- css中flex是什么
- css overflow属性有什么用
- css样式的组成
- css选择器是什么意思
- css浮动产生的负作用
- css盒子模型的属性介绍
- css超链接是什么
- css选择器之间的关系