图片上传那些事-图片预览篇

2017-09-06

阅读数量:次

在前端工作中，有一些小功能是大家经常遇到的，图片的上传就是经常遇到的功能之一，平时图片上传有很多的需求，比如图片预览，批量上传，有些还要有上传进度，本文将介绍如何实现图片的批量上传和删除以及预览。
以前的浏览器由于安全问题和兼容问题，实现不了本地图片信息的读取预览，只能选择一张就上传一张图片到服务器，然后服务器返回图片地址从而实现图片的预览，但是随着老的浏览器(ie)的逐渐淘汰，以及各个浏览器标准的统一，图片的预览也变得十分简单了。
图片预览有两种方法可以实现：

1.文件读取API-FileReader对象，它可以允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据，它的readAsDataURL方法将文件读取为 DataURL，在读取完成时调用如果设置onload事件，则调用之，在onload里能获得result属性，它包含一个data: URL格式的字符串以表示所读取文件的内容。

var myfile = document.getElementById('file');	
var List = document.getElementsByClassName('list')[0];
myfile.onchange = function(){
		var files = this.files;
		if(!files.length)return;		
		console.log(files);
		for(var i = 0;i<files.length;i++){
			var oFReader = new FileReader();
			oFReader.readAsDataURL(files[i]);							
			oFReader.onload = function (oFREvent) {
			console.log(oFReader);
			var oLi = '<li><img src="'+oFREvent.target.result+'"><span class="close" onclick="closeli(this)" >&times;</span></li>';	
			List.innerHTML+=oLi;
        	};
		}
	}

实际上这种方法就是将图片解析成base64编码，然后将这个编码传给img的src，使图片通过变成base64的方式能够显示在页面上。如下:

是不是简单的实现了图片的预览了，当然这种方法不是特别的好，因为base64是用于处理那些简单的图片的，一般稍微大一点的图片会使base64特别大，如图:
base64
那么第二种方法闪亮登场了。

2.URL.createObjectURL，URL.createObjectURL() 静态方法会创建一个 DOMString，其中包含一个表示参数中给出的对象的URL。这个 URL 的生命周期和创建它的窗口中的 document 绑定。这个新的URL 对象表示指定的 File 对象或 Blob 对象。

通俗来说就是URL.createObjectURL()方法会根据传入的参数创建一个指向该参数对象的URL. 这个URL的生命仅存在于它被创建的这个文档里. 新的对象URL指向执行的File对象或者是Blob对象，通过给img的src赋值URL.createObjectURL(File)就能让其显示在页面上。

var myfile = document.getElementById('file');	
var List = document.getElementsByClassName('list')[0];
	myfile.onchange = function(){
		var files = this.files;
		if(!files.length)return;		
		console.log(files);
		for(var i = 0;i<files.length;i++){				
			var oLi = '<li><img src="'+URL.createObjectURL(files[i])+'"><span class="close" onclick="closeli(this)" >&times;</span></li>';	
			List.innerHTML+=oLi;        	
		}
		}

这种方法简单多了，而且reatObjectURL可以有更好的性能，在处理上比用FileReader对象读取预览的更快，url十分简洁，完胜base64。
]

好了，到这里开始详细讲解多图预览了，首先要有一个上传input,既然要多图上传，就要设置multiple。

1	<input type="file" class="hidden" id="file" multiple="multiple"/>

然后我们给他设置一个onchang事件，监听上传文件都选择，通过其files属性得到FileList对象，可以通过这个对象访问到用户所选择的文件，这个FileList是一个数组，如果是单文件上传，要获取其File就是files[0]或者files.item(0)。
多文件上传的话，我们把得到的FileList对象循环一遍，获得每个文件的File，将这个File通过FileReader或createObjectURL进行处理，得到想要的预览url路径，然后创建一个img，将这个url路径赋给img的src。

var myfile = document.getElementById('file');	
myfile.onchange = function(){
	var files = this.files; //单文件就是this.files[0]，不用做for循环
	if(!files.length)return;		
	console.log(files);
	for(var i = 0;i<files.length;i++){				
		  console.log(files[i]);  	
	}
}

ok了，图片多图上传预览就完成了，但是实际情况中还要涉及到图片的多次重新选择和删除所选择的图片，那么该如何进行操作呢？我将在下篇博文中讲解，请期待:图片上传那些事-图片上传篇。
本文代码地址:链接