【文件上传前端】文件上传前端 Part3 —— HTML5 文件流方式

最新推荐文章于 2024-02-29 20:09:51 发布

snow_finland

最新推荐文章于 2024-02-29 20:09:51 发布

阅读量5.1k

点赞数

分类专栏：文件上传 javascript js 文章标签：文件上传前端 javascript js

本文链接：https://blog.csdn.net/snow_finland/article/details/52700680

版权

javascript 同时被 3 个专栏收录

28 篇文章 0 订阅

订阅专栏

21 篇文章 0 订阅

订阅专栏

文件上传

7 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML>
<html>
<head>
<meta content="text/html" charset="utf-8" />
<meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>upload file3 - h5读取文件流</title>
</head>

<body>
<input type="file" accept="image/*" id="J_upload_btn" />
<div id="J_preview_area">
</div>
<script src="jquery-1.9.1.min.js"></script>
<script>
$('body').on('change','#J_upload_btn',function(){
	var source = $(this).get(0),
		file = source.files[0];
	
	var ireg = /image\/.*/i,
		file_type = file.type,
		file_name = file.name;
	
	if(!file_type.match(ireg)) {
		alert('不是图片，请重新选择');
	}else{
		if(window.FileReader) {
			var fr = new FileReader();
			fr.onloadend = function(e) {
				var file_data;
				
				// 此处不做任何压缩直接读取文件流显示为图片（可扩展为压缩图片后显示）
				file_data = e.target.result;
				$('#J_preview_area').html('<img src="'+file_data+'" />');
				
				var url = 'upload_file2.php';
				
				var xmlhttp;
				
				if (window.XMLHttpRequest) {
					//IE7+, Firefox, Chrome, Opera, Safari
					xmlhttp = new XMLHttpRequest;
					
					//针对某些特定版本的mozillar浏览器的bug进行修正
					if (xmlhttp.overrideMimeType) {
						xmlhttp.overrideMimeType('text/xml');
					};
				} else if (window.ActiveXObject){
					//IE6, IE5
					xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
				};
				
				if(xmlhttp.upload){
					//2.回调函数
					xmlhttp.onreadystatechange = function(e){
						if(xmlhttp.readyState == 4){
							if(xmlhttp.status == 200){
								var json = eval('(' + xmlhttp.responseText + ')');
								console.log(json);
							}else{
								console.log(xmlhttp.responseText);
							}
						}
					};
					
					//3.设置连接信息
					xmlhttp.open("POST",url,true);
					
					//4.发送数据，开始和服务器进行交互
					var formdata = new FormData();
					// file_data.split(",")[1]，此处文件流为base64后的结果，需要将结果中的逗号前的信息去除（逗号前是给image标签显示用的）
					formdata.append("file_content", file_data.split(",")[1]);
					formdata.append("file_name", file_name);
					formdata.append("file_type", file_type);
					xmlhttp.send(formdata);
				}
			};  
			fr.readAsDataURL(file);  
		}
	}
});
</script>
</body>
</html>

使用HTML5读取图片显示缩略图，并使用文件流方式上传有以下几个注意点：

1、此方法和之前介绍的文件指针方式略有不同，是直接把文件流读取出来进行上传

2、此方法需支持HTML5的FileReader（即ie10+）

3、选择图片时，首先需要在input type="file” 加上accept的类型，其次也需要js进行正则校验文件的type（由于accept只是在文件选择器打开时筛选出符合条件的文件供用户选择，用户任然可以切换到所有文件，所以需要加上js的正则过滤，以确保文件类型正确）

4、由于FileReader读取文件流是一个异步的过程，图片预览必须写在FileReader的onloadend函数中，等文件流读取完毕后才能获取到base64之后的图片流，由于是直接把文件流上传，所以立即上传的操作也必须是写在FileReader的onloadend函数中，等文件流读取完毕后才能将获取到的文件流上传（不是立即上传，而是点击按钮上传的，也需要有标志位控制告诉是否文件流已经读取完毕）

5、上传的文件流需要切分，读取为base64的图片流有（data:image/png;base64,...）这样的头，需要把逗号之前的切掉才是真实的base64的文件流

6、这个方法是用http模拟ajax的方法异步上传文件，所以页面不会跳转，但是值得注意的是传统jQuery中的ajax是无法上传文件的

7、提交到的upload_file2.php具体如何接受文件，也会在之后文件上传-后端部分进行介绍

snow_finland

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【文件上传前端】文件上传前端 Part3 —— HTML5 文件流方式

upload file3 - h5读取文件流$('body').on('change','#J_upload_btn',function(){ var source = $(this).get(0), file = source.files[0]; var ireg = /image\/.*/i, file_type = file.type, file_nam
复制链接

扫一扫