HTML5学习之FileReader接口【上传图片预览，拖拽上传】

最新推荐文章于 2024-10-20 16:55:35 发布
最新推荐文章于 2024-10-20 16:55:35 发布
阅读量152 收藏
点赞数
文章标签： json javascript ViewUI
原文链接：https://juejin.im/post/59eb1cc86fb9a04525774145
版权

 

关于JQuery上传图片input file change 事件只触发一次问题：

$(document).on('change onpropertychange',"#imgUrl", function() { //文件上传
			     var file = this.files[0];  
			     console.log(file);
                 if((file.size / 1024).toFixed(0)>300){
                 	$.alert({
					    title: '提示!',
						content: "图片大小为:"+(file.size / 1024).toFixed(0)+"kb,要求不能大于300kb",
					    confirm: function(){
					        
					    }
				    });
					return;
                 };
                 //读取图片数据
                 var reader = new FileReader();
                 reader.onload = function (e) {
                     var data = e.target.result;
                     //加载图片获取图片真实宽度和高度
                     var image = new Image();
                     image.onload=function(){
                         var width = image.width;
                         var height = image.height;
                         if(width=="590"&&height=="824"){
                         	  postFile();
                         	  $('#imgUrl').replaceWith('<input id="imgUrl" class="postfile" type="file" multiple="multiple">');
                         }else{
                         	$.alert({
							    title: '提示!',
								content: "图片宽高不符合590*824！",
							    confirm: function(){
							        
							    }
						    });
						    $('#imgUrl').replaceWith('<input id="imgUrl" class="postfile" type="file" multiple="multiple">');
                         }
                     };
                     image.src= data;
                 };
                 reader.readAsDataURL(file);
                 
			});
复制代码
$(document).on('change onpropertychange', "#postfile",function() { //这里要用事件委派b	 
	$(".poststate").text("请选择上传以.txt后缀结尾的文本文件！").css("color", "blue");
	postFile();
	$('#postfile').replaceWith('<input id="postfile" type="file" accept="text/plain" multiple="multiple" />');
});
复制代码
function postFile() { //判断是否有选择上传文件
			var imgPath = $("#postfile").val();
			if(imgPath == "") {
				$(".poststate").text("请选择上传的文本文件,以.txt后缀结尾！").css("color", "blue");
				return;
			}

			var strExtension = imgPath.substr(imgPath.lastIndexOf('.') + 1); //判断上传文件的后缀名
			if(strExtension != 'txt') {
				$(".poststate").text("请选择上传的文本文件,以.txt后缀结尾！").css("color", "blue");
				return;
			}
			var formData = new FormData();
			formData.append("file", $("#postfile")[0].files[0]);
			//console.log(postfile.files[0]);
			$.ajax({
				contentType: "multipart/form-data",
				url: "xxxx/xxxxx/xx",
				type: "POST",
				data: formData,
				dataType: "text",
				processData: false,
				contentType: false,
				cache: false,
				beforeSend: function() {
					$(".poststate").text("正在努力上传中,请稍后!").css("color", "blue");
				},
				success: function(data) {
					var reObj = JSON.parse(data);
					if(reObj.status=="0"){
						 
						if(reObj.content) {
							$.alert({
								title: '提示:',
								backgroundDismiss: true, 
								content: '上传文件成功!'
						    });
							$(".poststate").text('"' + reObj.content.fileName + '"' + "上传成功!").css("color", "blue");
							PostObj.pubS3FileUrl = reObj.content.url;
						}else {
							$.alert({
								title: '提示:',
								backgroundDismiss: true,
								content:  reObj.message
							});
							$(".poststate").text("");
						}
					}else{
						PostObj.pubS3FileUrl="";
						$.alert({
								title: '提示:',
								backgroundDismiss: true,
								content:  reObj.message
							});
							$(".poststate").text(reObj.message);
					    }
				},
				error: function(XMLHttpRequest, textStatus, errorThrown) {
					$(".poststate").text("上传失败，请检查网络后重试!").css("color", "red");;
				    
				}
			});
		}
复制代码


用来把文件读入内存，并且读取文件中的数据。FileReader接口提供了一个异步API，使用该API可以在浏览器主线程中异步访问文件系统，读取文件中的数据。到目前文职，只有FF3.6+和Chrome6.0+实现了FileReader接口。

1、FileReader接口的方法

FileReader接口有4个方法，其中3个用来读取文件，另一个用来中断读取。无论读取成功或失败，方法并不会返回读取结果，这一结果存储在result属性中。

方法名 参数描述
readAsBinaryStringfile将文件读取为二进制编码
readAsTextfile,[encoding]将文件读取为文本
readAsDataURLfile将文件读取为DataURL
abort(none)终端读取操作

2、FileReader接口事件

FileReader接口包含了一套完整的事件模型，用于捕获读取文件时的状态。

事件描述
onabort中断
onerror出错
onloadstart开始
onprogress正在读取
onload成功读取
onloadend读取完成，无论成功失败


上传图片预览：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
			}
			
			.container {
				width: 800px;
				margin: 100px auto;
			}
			
			.imgs {
				width: 300px;
				height: 300px;
			}
			
			.imgs img {
				width: 100%;
			}
		</style>
	</head>

	<body>
		<div class="container">
			<input type="file" name="file" id="file" value="上传" />
			<div class="imgs">
				<img id="preImg" src="" />
			</div>
			<div class="imgs">
				<img id="preImg1" src="" />
			</div>
			<div class="imgs">
				<img id="preImg2" src="" />
			</div>
			<div class="imgs">
				<img id="preImg3" src="" />
			</div>
		</div>
		<script type="text/javascript">
			var fe = document.getElementById("file");
			var img = document.getElementById("preImg");
			var img1 = document.getElementById("preImg1");
			var img2 = document.getElementById("preImg2");
			var img3 = document.getElementById("preImg3");
			fe.onchange = function() {
				var reader = new FileReader();
				var _file = this.files[0];
				console.log("reader");
				console.log(reader);
				//  建议去输出下这3个东西 仔细看看就明白了
				console.log("this.files");
				console.log(this.files);
				console.log("_file");
				console.log(_file);
				reader.readAsDataURL(_file); //这个是很重要的一步  讲读取到的文件编码成DataURL 否则不能用
				console.log("reader");
				console.log(reader);
				reader.onload = function() {
					img.setAttribute('src', this.result);
				};

			}
		</script>
	</body>

</html>
复制代码
 <!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<script type="text/javascript">
			var result = document.getElementById("result");
			var file = document.getElementById("file");

			//判断浏览器是否支持FileReader接口  
			if(typeof FileReader == 'undefined') {
				result.InnerHTML = "<p>你的浏览器不支持FileReader接口！</p>";
				//使选择控件不可操作  
				file.setAttribute("disabled", "disabled");
			}

			function readAsDataURL() {
				//检验是否为图像文件  
				var file = document.getElementById("file").files[0];
				if(!/image\/\w+/.test(file.type)) {
					alert("看清楚，这个需要图片！");
					return false;
				}
				var reader = new FileReader();
				//将文件以Data URL形式读入页面  
				reader.readAsDataURL(file);
				reader.onload = function(e) {
					var result = document.getElementById("result");
					//显示文件  
					result.innerHTML = '<img src="" alt="" />';
				}
			}

			function readAsBinaryString() {
				var file = document.getElementById("file").files[0];
				var reader = new FileReader();
				//将文件以二进制形式读入页面  
				reader.readAsBinaryString(file);
				reader.onload = function(f) {
					var result = document.getElementById("result");
					//显示文件  
					result.innerHTML = this.result;
				}
			}

			function readAsText() {
				var file = document.getElementById("file").files[0];
				var reader = new FileReader();
				//将文件以文本形式读入页面  
				reader.readAsText(file);
				reader.onload = function(f) {
					var result = document.getElementById("result");
					//显示文件  
					result.innerHTML = this.result;
				}
			}
		</script>
		<p>
			<label>请选择一个文件：</label>
			<input type="file" id="file" />
			<input type="button" value="读取图像" onclick="readAsDataURL()" />
			<input type="button" value="读取二进制数据" onclick="readAsBinaryString()" />
			<input type="button" value="读取文本文件" onclick="readAsText()" />
		</p>
		<div id="result" name="result"></div>
	</body>

</html>复制代码





上传文件预览：

准备上传

<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>文件上传</title>
		<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css">
		<script src=""></script>
		<style>
			body,
			html {
				margin: 0 auto;
			}
			
			.up-header {
				width: 600px;
				text-align: center;
			}
			
			.up-content {
				min-height: 200px;
				border: 1px solid #CCCCCC;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				background-color: #FAFAFA;
				color: #999;
				font-size: 20px;
				text-align: center;
			}
			
			.up-area {
				border: 2px dashed #ccc;
				margin: 10px 20px 20px 20px;
				width: 300px;
				min-height: 200px;
				line-height: 100px;
				background-color: #fff;
			}
			
			.list-group {
				margin: 0px auto;
				;
				width: 200px;
				min-height: 100px;
				padding: 10px;
			}
			
			img {
				max-width: 100%;
			}
			
			.btn {}
			
			.close {
				margin-left: 550px;
				margin-top: -20px;
			}
		</style>
	</head>

	<body>

		<header id="header" class="page-header">
			<!-- 头部显示 -->
			<div class="container upload ">
				<div class="up-header center-block">
					<h2>文件上传——两种形式</h2>
					<div class="input-group" style="width:600px; display:flex;">
						<input type="text" class="form-control" placeholder="在此处粘贴图片网址">
						<button type="button" class="btn btn-primary">上传图片</button>
					</div>
				</div>
				<div class="row">
					<!-- 拖拽图片到这来 -->
					<div class="col-md-5 col-md-offset-1 up-content  dragFile">
						<p style="margin-top:10px;">拖拽图片到这里哟</p>
						<div class="up-area">
							<input type="file" style="display:none;" id="fileDrag" name="fileDragselect" multiple>
							<div class="row">
								<ul class="list-group clearfix list-drag">
								</ul>
							</div>
						</div>

					</div>
					<!-- 点击按钮上传文件 -->
					<div class="col-md-5 up-content btnFile">
						<div class="btn">
							<button type="button" class="btn btn-success" id="btn"> 本地上传文件</button>
							<input type="file" style="display:none;" id="fileInput" name="fileselect" multiple>
						</div>
						<div class="up-area">
							<div class="row">
								<ul class="list-group clearfix list-btn">
								</ul>
							</div>
						</div>
					</div>
				</div>

			</div>
		</header>

		<script type="text/javascript">
			//点击本地上传文件
			$('#btn').click(() => {
				$('#fileInput').click();
			})
			$('#fileInput').change((event) => {
				var files = event.target.files;
				appendFile(files, '.list-btn');
			})
			//拖拽上传文件 在页面进行预览 上传form用到ajax
			const dragbox = document.querySelector('.dragFile');
			dragbox.addEventListener('dragover', function(e) {
				e.preventDefault(); // 必须阻止默认事件
			}, false);
			dragbox.addEventListener('drop', function(e) {
				e.preventDefault(); // 阻止默认事件
				var files = e.dataTransfer.files; //获取文件
				appendFile(files, '.list-drag')
				// code
			}, false);

			function appendFile(files, listName) {
				for(file of files) {
					let url = window.URL.createObjectURL(file);
					let liStr = `
		            <li class="list-group-item">
		              <div>
		                <img src="" alt="文件" />
		              </div>
		            </li>
		          `;
					$(listName).append(liStr);
				}
			}
		</script>

	</body>

</html>复制代码


weixin_34357962
关注
基于H5的图片拖拽和预览插件dropify
03-20
基于H5的图片拖拽和预览插件dropify。。。。。。。。。。。
vue中H5图片拖拽上传即时预览
qq_44096635的博客
05-29 775
html部分 <template> <div> <img ref="img" style="width:200px;overflow:hidden"/> <div class="drop" @drop="handleDrop" @dragover="handleDragover" @dragenter="handleDragover"> 拖拽图片上传 </div> </div> </te
使用File API 之FileReader 实现文件上传前预览
weixin_34202952的博客
05-13 91
　　对于基于浏览器的应用而言，访问本地文件都是一件头疼的事情，通常我们能做的仅仅是使用<input type="file">标签来上传文件。实现过程是：选取文件的时候value 属性保存了用户指定的文件的名称，表单被提交的时候，浏览器会向服务器发送选中的文件的内容而不仅仅是发送文件名。再获取服务器返回的地址，然后做预览。 　　但是如果有一天我们要上传一个图片，传了图片后预览想换另一张...
移动端html5上传图片,手机端上传图片HTML5之FileReader
weixin_35256987的博客
06-04 205
分度读取文件：读取进度：var h = {init: function() {var me = this;document.getElementById(‘File’).onchange = me.fileHandler;document.getElementById(‘Abort’).onclick = me.abortHandler;me.status = document.getElemen...
H5实现多图片预览上传，可点击可拖拽
04-20
H5实现多图片预览上传，可点击可拖拽，样式漂亮，接口简单
html5实现拖拽上传图片,JS HTML5拖拽上传图片预览
weixin_31787335的博客
06-04 290
1.文件API：(File API)file类型的的表单控件选择的每一个文件都是一个file对象，而FileList对象则是这些file对象的集合列表，代表所选择的所有文件。file对象继承于Blob对象，该对象表示二进制原始数据，提供slice方法，可以访问到字节内部的原始数据块。总之，file对象包含与FlieList对象，而file对象继承于Blob对象！各对象的相关属性关系：FileRea...
html5自学图片上传预览,JS HTML5拖拽上传图片预览
weixin_33514140的博客
05-31 192
1.文件API：(File API)file类型的的表单控件选择的每一个文件都是一个file对象，而FileList对象则是这些file对象的集合列表，代表所选择的所有文件。file对象继承于Blob对象，该对象表示二进制原始数据，提供slice方法，可以访问到字节内部的原始数据块。总之，file对象包含与FlieList对象，而file对象继承于Blob对象！各对象的相关属性关系：FileRea...
HTML5拖拽上传图片预览提交代码
07-24
HTML5拖拽上传图片预览提交是一种现代网页技术，它结合了HTML5的新特性，使得用户可以通过简单地拖放操作来上传图片，并在上传前进行预览，提升了用户体验。这一功能主要依赖于HTML5的`<input type="file">`元素的`...
JS HTML5拖拽上传图片预览
12-11
1.文件API：（File API） file类型的的表单控件选择的每一个文件都是一个...由图可知：HTML5还提供了FileReader接口：用于将文件读入内存，并读取文件中的数据。 var reader=new FileReader(); 该接口总共有四个方法和
基于bootstrap.3的文件上传效果, 可拖拽上传、预览的HTML5文件上传插件.zip
02-12
标题中的“基于Bootstrap.3的文件上传效果, 可拖拽上传、预览的HTML5文件上传插件.zip”指的是一个使用Bootstrap 3框架和HTML5技术实现的高级文件上传功能。这个插件允许用户通过拖放操作上传文件，并且在上传前可以...
原生js FileReader对象实现图片上传本地预览效果
10-19
今天我们将探讨使用原生JavaScript中的FileReader对象来实现图片上传和本地预览效果的技术。 首先，FileReader是一个用于读取本地文件系统的接口，它允许Web应用异步读取存储在用户计算机上的文件（比如图片、文本...
通过HTML5 FileReader实现上传图片预览功能
m0_37310097的博客
07-17 514
在上传图片到服务器之前，我们希望可以预览一下要上传的图片。这个功能可以通过HTML5 的FileReader()方法来实现。 FileReader是HTML5 File API的一部分。它实现了一种异步文件读取机制。可以把FileReader想象为XMLHttpRequest，区别只是它读取的是文件系统，而不是远程服务器。为了读取文件中的数据，FileReader提供了如下几个方法。 re
关于fileReader的一个坑
Corey
09-09 9415
在用fileReader做图片浏览上传时，  使用base64格式 var _this = this; var reader = new FileReader(); reader.readAsDataURL(file); reader.onload = function(e) { PostBatchUpload...
fileReader文件预览，拖拽，定位，WEB存储，应用缓存
qq_43335204的博客
10-28 537
即时：用户选择图片后可以立即预览=&amp;gt;&amp;gt;onchange 预览：通过readAsDataURL 完成 FileReader接口有4个方法，其中3个用来读取文件，另一个用来中断读取。无论读取成功或失败，方法并不会返回读取结果，这一结果存储在result属性中。 FileReader接口的方法 readAsText：该方法有两个参数，其中第二个参数是文本的编码方式，默认值为 UTF-8。...
Spring的依赖注入问题APPLICATION FAILED TO START
康宁的博客
10-15 434
3、控制器层，大家有时称它为Controller层即控制器层，在该类上经常用到@RestController注解相当于@Controller和@ResponseBody注解的组合，表示该类是一个控制器，使得控制器方法返回的对象会自动通过消息转换器（如Jackson）转换为JSON或XML格式，并写入HTTP响应体中。1、在业务逻辑层中，类的实例化需要在实现类上添加@Service实例化该类，代码如下。总结，对于上述我描述的问题，直接使用业务逻辑层中的@Service即可解决。
SmartAdmin项目前端启动报错 SyntaxError: Unexpected token ‘??=‘
qq_41883461的博客
10-14 278
大家好，我是时生，我又回来了，站在巨人的肩膀做出一点点改变。欢迎批评，欢迎指正，欢迎共享，有事私信。
JSON与现代Web开发：数据交互的最佳选择
最新发布
qq_17153885的博客
10-20 591
JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，易于人阅读和编写，同时也便于机器解析和生成。它以文本格式存储数据，常用于Web应用中的数据传输，尤其是在客户端和服务器之间。
JS+HTML5 FileReader 实现文件上传预览：代码示例与应用
本文档主要介绍了如何利用JavaScript (JS) 和 HTML5 的 FileReader API 在文件上传前实现本地预览功能。HTML5 的 FileReader 对象提供了一种在客户端读取文件的能力，这对于提升用户体验，尤其是处理大文件或敏感...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值