input file单文件上传和FileReader对象的基本使用

最新推荐文章于 2024-04-25 16:09:54 发布

置顶菜鸡张大民

最新推荐文章于 2024-04-25 16:09:54 发布

阅读量2.1k

点赞数

分类专栏： web前端 javascript HTML5 HTML 文件上传文章标签： file JavaScript HTML5 文件上传 FileReader

本文链接：https://blog.csdn.net/m0_38085253/article/details/81530286

版权

web前端同时被 3 个专栏收录

8 篇文章 1 订阅

订阅专栏

javascript

4 篇文章 0 订阅

订阅专栏

HTML5

3 篇文章 0 订阅

订阅专栏

多说无益，撸出的代码才是铁的事实。。。

建议：可以先看代码再看步骤也挺不错。。。

第一步：在上传框change的时候，获取自带的files对象，一般获取到的为files[0],如下面代码

oFlieImg.onchange = function(e){
		var _self = e.currentTarget;
		var oSelfFile = _self.files[0];	//获取文件
		console.log(oSelfFile)
}

第二步：实例化FileReader，一般来说在input元素的相关事件（例如onchange）发生的时候，开始实例化一个FileReader，代码如下

var oReader = new FileReader();    // 实例化FileReader对象

第三步：使用FileReader.readAsDataURL(file)读取文件内容，在FileReader对象被实例化之后读取获取到的文件信息。代码入下

oReader.readAsDataURL(oSelfFile);	// 读取文件

第四步：在FileReader对象加载的时候获取到它自己的result值，这里说明一下：获取result值有多种，第一种直接是this.result、第二种是e.currentTarget.result、第三种是e.target.result，其实打印其e的时候你会发现，它所有的对象都在，逐个调用即可。这里因为是基础应用，所以就不多做介绍了。这里获取到的base64，可以直接作为图片的URL使用，也可以直接在跟后端交互的时候传给后端。第四步的代码入下

oReader.onload = function(ev){
		// 获取到FileReader读取文件的base64
		oImgBase64 = ev.currentTarget.result;
}

第五步：其实上面也讲了，就是将获取到的base64直接作为图片的URL使用，也可以直接在跟后端交互的时候传给后端。

最后小狼子把这个简单的案例的代码发给大家，因为没做封装，所以代码有点小乱，希望见谅

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="小狼子<2734339436@qq.com>">
<title>单文件上传</title>
<style type="text/css">
	.fileimg-ct{
		width: 200px;
		height: 200px;
		background-color: #c1cbda;
		position: relative;
		border: 1px #c1cbda solid;
	}
	.fileimg-ct > img{
		border: none;
		background: none;
		width: 160px;
		height: 160px;
		position: absolute;
		left: 20px;
		top: 20px;
		display: none;
		z-index: 3;
	}
	.fileimg-ct > button{
		width: 200px;
		height: 200px;
		background: #fff;
		color: #333;
		margin: 0;
		padding: 0;
		border: none;
		outline: none;
		cursor: pointer
	}
	.fileimg-ct > span{
		font-size: 14px;
		position: absolute;
		right: 10px;
		top: 10px;
		z-index: 3;
		cursor: pointer;
		display: none;
	}
	.fileimg-ct > span:hover{
		color: red;
	}
	.fileimg-ct > input{
		width: 200px;
		height: 200px;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 2;
		opacity: 0;
	}
</style>
</head>
<body>
<div class="fileimg-ct">
	<button>请上传图片</button>
	<span id="clearImg">x</span>
	<input type="file" name="file" id="fileImg" accept=".gif,.jpg,.jpeg,.png">
	<img src="img/m_01.jpeg" id="showImg" width="200" height="200">
</div>
<script type="text/javascript">
	var oFlieImg = document.querySelector('#fileImg');
	var oShowImg = document.querySelector('#showImg');
	var oClearImg = document.querySelector('#clearImg');
	var oImgBase64 = '';
	imgIsEmpty();
	oFlieImg.onchange = function(e){
		var _self = e.currentTarget;
		var oSelfFile = _self.files[0];	//获取文件
		console.log(oSelfFile)
		// console.log(oSelfFile.name.lastIndexOf('.'));
		// 如果要限制文件类型的话这里可以判定oSelfFile.name‘.’最后一次出现的位置之后的单词是否为想要的类型
		// 或者判断oSelfFile.type
		// 判断文件大小为size单位为字节
		var oReader = new FileReader();
		oReader.readAsDataURL(oSelfFile);	// 读取文件
		// 加载文件
		oReader.onload = function(ev){
			// 获取到FileReader读取文件的base64
			oImgBase64 = ev.currentTarget.result;
			// console.log(oImgBase64)
			if (oShowImg) {
				oShowImg.setAttribute('src', oImgBase64);
				imgIsEmpty();
			}
		}
	}
	oClearImg.onclick = function(){
		oShowImg.setAttribute('src', '');
		imgIsEmpty();
	}
	function imgIsEmpty(){
		var oShowSrc = oShowImg.getAttribute('src');
		if (oShowSrc==='') {
			oClearImg.style.display = 'none';
			oShowImg.style.display = 'none';
		}else {
			oShowImg.style.display = 'block';
			oClearImg.style.display = 'block';
		}
	}
	// 没有做封装见谅
</script>
</body>
</html>

好吧，我承认几乎没人会看到这里，但是还是bb一句，如果想要更多的文件上传的操作可以在下方留言哦。。。

菜鸡张大民

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
input file单文件上传和FileReader对象的基本使用

多说无益，撸出的代码才是铁的事实。。。建议：可以先看代码再看步骤也挺不错。。。第一步：在上传框change的时候，获取自带的files对象，一般获取到的为files[0],如下面代码oFlieImg.onchange = function(e){ var _self = e.currentTarget; var oSelfFile = _self.files[0]; //获取...
复制链接

扫一扫