利用input图片上传

最新推荐文章于 2023-06-07 15:40:24 发布

慢半拍、

最新推荐文章于 2023-06-07 15:40:24 发布

阅读量274

点赞数

分类专栏： javascript 其他文章标签： css

原文链接：https://blog.csdn.net/namechenfl/article/details/94738147

版权

javascript 同时被 2 个专栏收录

25 篇文章 1 订阅

订阅专栏

其他

19 篇文章 0 订阅

订阅专栏

利用HTML5FileReader()中的.readAsDataURL()方法将图片url转为Base64位码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>input file图片上传</title>
	</head>
	<body>
		<input type="file" accept="image/*"  id="file" value=""/> 
		<div id="uploadImg" style="width: 500px; height: 500px;">
		</div>
	</body>
	<script>
		
		var oUploadImg = document.querySelector("#uploadImg") //获取uploaImg节点,
				oFile = document.querySelector("#file"); //获取input file节点
				console.log(oUploadImg);
				console.log(oFile);
				console.log(oFile.files); 
				oFile.addEventListener('change',function(){
//					console.log(oUploadImg);
//					console.log(oFile);
					console.log(this); //this指针指向input
					console.log(this.files);
					var file = this.files[0];
					console.log(file.type);
					console.log(file.type.indexOf("image"));//输出0的时候成立，-1的时候不成立
					if(file.type.indexOf("image")==0){
						var reader = new FileReader(); //创建FileReader对象实例reader
						reader.readAsDataURL(file); //将图片url转换为base64码
						reader.onload = function(e){
							var newUrl = this.result;
							console.log(newUrl);
							oUploadImg.style.backgroundImage = 'url('+newUrl+')';
						}
						console.log(reader.result);
						console.log(reader);
						console.log(reader);
					};
					
				})
	</script>
</html>

多图片上传

formData()表单提交方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>input file图片上传</title>
	</head>
	<body>
		<input type="file" accept="image/*"  id="file" value="" multiple/> 
		<div id="uploadImg" style="width: 500px; height: 500px;">
		</div>
	</body>
	<script>
		
		var oUploadImg = document.querySelector("#uploadImg") //获取uploaImg节点,
				oFile = document.querySelector("#file"); //获取input file节点
				console.log(oUploadImg);
				console.log(oFile);
				console.log(oFile.files); 
			oFile.addEventListener('change',function(){
//					console.log(oUploadImg);
//					console.log(oFile);
					console.log(this); //this指针指向input
					console.log(this.files);
					//创立FormData对象
					var formData = new FormData(); //实例化一个formData对象
					formData.append =("file",this.files); //this.files对象转换为字符串
					console.log(formData);
					console.log(formData);
				})
	
	</script>
</html>

慢半拍、

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
利用input图片上传

利用HTML5FileReader()中的.readAsDataURL()方法将图片url转为Base64位码<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>input file图片上传</title> </head> &l...
复制链接

扫一扫