js fileReader处理文件

最新推荐文章于 2024-06-18 20:01:25 发布

LQW_home

最新推荐文章于 2024-06-18 20:01:25 发布

阅读量1.4w

点赞数

分类专栏： js 13k

本文链接：https://blog.csdn.net/LQW_java_home/article/details/78412224

版权

13k 同时被 2 个专栏收录

53 篇文章 0 订阅

订阅专栏

13 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" dir="ltr">
 <head> 
  
 </head> 
 <body> 
	<input type="file" id="file" > <!-- 只能上传单个文件 -->
	<input type="file" id="files" multiple> <!-- 可以上传多个文件 -->
	<script>
		window.οnlοad=function(){
			var f = document.getElementById("file");
			var fs = document.getElementById("files");
			
			//this.files即获取input中上传的file对象 是个数组 
			f.onchange = function(){
				//获取文件对象
				var file = this.files[0];
				//使用fileReader对文件对象进行操作
				var reader = new FileReader();
				//将文件读取为arrayBuffer
				//reader.readAsArrayBuffer(file);
				//reader.onload = function(){
				//	console.log(reader.result);
				//}
				
				
				/*reader.readAsBinaryString(file);
				reader.onload = function(){
					console.log(reader.result);
				}
				*/
				//用于图片显示不需要传入后台，reader.result的结果是base64编码数据，直接放入img的src中即可
				reader.readAsDataURL(file);
				reader.onload = function(){
					console.log(reader.result);
				}
			}
			
			
			fs.onchange = function(){
				
			}
		}
	</script>
 </body>
</html>

LQW_home

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js fileReader处理文件

window.onload=function(){ var f = document.getElementById("file"); var fs = document.getElementById("files"); //this.files即获取input中上传的file对象是个数组 f.onchange = function(){ //获取文件对象
复制链接

扫一扫

专栏目录