简单的上传图片文档预览下载栗子

前端的上传下载主要使用的是 input标签来实现

html 部分 只是一个简单的上传加图片显示的容器
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<form enctype="multipart/form-data"  method="post">
				<input type="file" id="file">
				<img src="" alt="" id="image">
				<a href=""  id="downLoad">下载</a>
		</form>
	
	</body>
</html>
<script src="./index.js"></script>

js 部分

class UploadFile {
	constructor(id,img){
		this.file = document.getElementById(id)
		this.img = document.getElementById(img)
	}
	init(){
		this.file.addEventListener('change',() => {
			console.log(this.file.value)
			console.log(this.file.files[0])
			let type = this.file.files[0].type
			// 根据 自己的需求校验上传格式
			// if(!this.file.files || type != 'image/png'){
			// 	this.file.value = ''
			// 	alert('不符合上传格式')
			// 	return false
			// }
				this.renderFile(this.file.files[0])
		})
	}
	renderFile(file){
		let render = new FileReader()
		render.onload = (e) => {
				console.log(e)
				let {result} = e.target
				this.img.src = result
				// word文档下载用a标签 可以下载
		}
		render.readAsDataURL(file)
	}
	
}

let file = new UploadFile('file','image')
file.init()

到这里就结束了,这只是个栗子。

你可能感兴趣的:(javascript,前端,开发语言)