JavaScript上传图片方式

最新推荐文章于 2024-09-22 22:38:07 发布

ACGuan

最新推荐文章于 2024-09-22 22:38:07 发布

阅读量821

点赞数

分类专栏： Web前端

本文链接：https://blog.csdn.net/csdnlinyongsheng/article/details/106716157

版权

本文介绍了两种使用JavaScript实现图片上传的方式，包括传统的表单提交和现代的File API结合Ajax的上传方法，详细讲解了各自的工作原理和实现步骤，帮助开发者理解如何在前端处理图片上传操作。

摘要由CSDN通过智能技术生成

第一种：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		#preview{
			width:200px;
			margin-bottom:10px;
		}
	</style>
</head>
<body>
	<input type="file" name="" id="btn">
	<div id="preview"></div>
	

	<script>
		var preview = document.querySelector("#preview");
		var btn = document.querySelector("#btn");
		btn.onchange = function(e){
			var file = this;
			for(var i = 0; i < this.files.length; i++){
				var reader = new FileReader();
				reader.onload = function(event){
					console.log(event);
					preview.innerHTML += '<img src="'+event.target.result+'"/>'
				}
				reader.readAsDataURL(file.files[0]);
			}
		}
		
	</script>