HTML5多文件预览上传

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 HTML5多文件预览上传的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>HTML5多文件预览上传</title>
		<!-- 引用控制层插件样式 -->
		<link rel="stylesheet" href="control/css/zyUpload.css" type="text/css">
		
		<script type="text/javascript" src="jquery-1.7.2.js"></script>
		<!-- 引用核心层插件 -->
		<script type="text/javascript" src="core/zyFile.js"></script>
		<!-- 引用控制层插件 -->
		<script type="text/javascript" src="control/js/zyUpload.js"></script>
		<!-- 引用初始化JS -->
		<script type="text/javascript" src="demo.js"></script>
	</head>
	<body>
		<h1 style="text-align:center;">zyUpload示例</h1>
	    <div id="demo" class="demo"></div>
</body>
</html>

JS代码(demo.js):

$(function(){
	// 初始化插件$("#demo").zyUpload({
	width:"650px",// 宽度height:"400px",// 宽度itemWidth:"120px",// 文件项的宽度itemHeight:"100px",// 文件项的高度url:"/upload/UploadAction",// 上传文件的路径multiple:true,// 是否可以多个文件上传dragDrop:true,// 是否可以拖动上传文件del:true,// 是否可以删除文件finishDel:false,// 是否在上传文件完成后删除预览/* 外部获得的回调接口 */
onSelect:function(files,allFiles){
	// 选择文件的回调方法console.info("当前选择了以下文件：");
	console.info(files);
	console.info("之前没上传的文件：");
	console.info(allFiles);
}
,onDelete:function(file,surplusFiles){
	// 删除一个文件的回调方法console.info("当前删除了此文件：");
	console.info(file);
	console.info("当前剩余的文件：");
	console.info(surplusFiles);
}
,onSuccess:function(file){
	// 文件上传成功的回调方法console.info("此文件上传成功：");
	console.info(file);
}
,onFailure:function(file){
	// 文件上传失败的回调方法console.info("此文件上传失败：");
	console.info(file);
}
,onComplete:function(responseInfo){
	// 上传完成的回调方法console.info("文件上传完成");
	console.info(responseInfo);
}
}
);
}
);

JS代码(zyFile.js):

/* * zyFile.js 基于HTML5 文件上传的核心脚本 http://www.czlqibu.com * by zhangyan 2014-06-21 QQ:623585268*/
var ZYFILE ={
	fileInput:null,// 选择文件按钮dom对象uploadInput:null,// 上传文件按钮dom对象dragDrop:null,//拖拽敏感区域url:"",// 上传action路径uploadFile:[],// 需要上传的文件数组lastUploadFile:[],// 上一次选择的文件数组，方便继续上传使用perUploadFile:[],// 存放永久的文件数组，方便删除使用fileNum:0,// 代表文件总个数，因为涉及到继续添加，所以下一次添加需要在它的基础上添加索引/* 提供给外部的接口 */
filterFile:function(files){
	// 提供给外部的过滤文件格式等的接口，外部需要把过滤后的文件返回return files;
}
,onSelect:function(selectFile,files){
	// 提供给外部获取选中的文件，供外部实现预览等功能 selectFile:当前选中的文件 allFiles:还没上传的全部文件}
,onDelete:function(file,files){
	// 提供给外部获取删除的单个文件，供外部实现删除效果 file:当前删除的文件 files:删除之后的文件}
,onProgress:function(file,loaded,total){
	// 提供给外部获取单个文件的上传进度，供外部实现上传进度效果}
,onSuccess:function(file,responseInfo){
	// 提供给外部获取单个文件上传成功，供外部实现成功效果}
,onFailure:function(file,responseInfo){
	// 提供给外部获取单个文件上传失败，供外部实现失败效果}
,onComplete:function(responseInfo){
	// 提供给外部获取全部文件上传完成，供外部实现完成效果}
,/* 内部实现功能方法 */
// 获得选中的文件//文件拖放funDragHover:function(e){
	e.stopPropagation();
	e.preventDefault();
	this[e.type === "dragover"? "onDragOver":"onDragLeave"].call(e.target);
	return this;
}
,// 获取文件funGetFiles:function(e){
	var self = this;
	// 取消鼠标经过样式this.funDragHover(e);
	// 从事件中获取选中的所有文件var files = e.target.files || e.dataTransfer.files;
	self.lastUploadFile = this.uploadFile;
	this.uploadFile = this.uploadFile.concat(this.filterFile(files));
	var tmpFiles = [];
	// 因为jquery的inArray方法无法对object数组进行判断是否存在于，所以只能提取名称进行判断var lArr = [];
	// 之前文件的名称数组var uArr = [];
	// 现在文件的名称数组$.each(self.lastUploadFile,function(k,v){
	lArr.push(v.name);
}
);
	$.each(self.uploadFile,function(k,v){
	uArr.push(v.name);
}
);
	$.each(uArr,function(k,v){
	// 获得当前选择的每一个文件 判断当前这一个文件是否存在于之前的文件当中if($.inArray(v,lArr) < 0){
	// 不存在tmpFiles.push(self.uploadFile[k]);
}
}
);
	// 如果tmpFiles进行过过滤上一次选择的文件的操作，需要把过滤后的文件赋值//if(tmpFiles.length!=0){
	this.uploadFile = tmpFiles;
	//}
// 调用对文件处理的方法this.funDealtFiles();
	return true;
}
,// 处理过滤后的文件，给每个文件设置下标funDealtFiles:function(){
	var self = this;
	// 目前是遍历所有的文件，给每个文件增加唯一索引值$.each(this.uploadFile,function(k,v){
	// 因为涉及到继续添加，所以下一次添加需要在总个数的基础上添加v.index = self.fileNum;
	// 添加一个之后自增self.fileNum++;
}
);
	// 先把当前选中的文件保存备份var selectFile = this.uploadFile;
	// 要把全部的文件都保存下来，因为删除所使用的下标是全局的变量this.perUploadFile = this.perUploadFile.concat(this.uploadFile);
	// 合并下上传的文件this.uploadFile = this.lastUploadFile.concat(this.uploadFile);
	// 执行选择回调this.onSelect(selectFile,this.uploadFile);
	console.info("继续选择");
	console.info(this.uploadFile);
	return this;
}
,// 处理需要删除的文件 isCb代表是否回调onDelete方法// 因为上传完成并不希望在页面上删除div，但是单独点击删除的时候需要删除div 所以用isCb做判断funDeleteFile:function(delFileIndex,isCb){
	var self = this;
	// 在each中this指向没个v 所以先将this保留var tmpFile = [];
	// 用来替换的文件数组// 合并下上传的文件var delFile = this.perUploadFile[delFileIndex];
	console.info(delFile);
	// 目前是遍历所有的文件，对比每个文件 删除$.each(this.uploadFile,function(k,v){
	if(delFile != v){
	// 如果不是删除的那个文件 就放到临时数组中tmpFile.push(v);
}
else{
}
}
);
	this.uploadFile = tmpFile;
	if(isCb){
	// 执行回调// 回调删除方法，供外部进行删除效果的实现self.onDelete(delFile,this.uploadFile);
}
console.info("还剩这些文件没有上传:");
	console.info(this.uploadFile);
	return true;
}
,// 上传多个文件funUploadFiles:function(){
	var self = this;
	// 在each中this指向没个v 所以先将this保留// 遍历所有文件 ，在调用单个文件上传的方法$.each(this.uploadFile,function(k,v){
	self.funUploadFile(v);
}
);
}
,// 上传单个个文件funUploadFile:function(file){
	var self = this;
	// 在each中this指向没个v 所以先将this保留var formdata = new FormData();
	formdata.append("fileList",file);
	var xhr = new XMLHttpRequest();
	// 绑定上传事件// 进度 xhr.upload.addEventListener("progress",function(e){
	// 回调到外部self.onProgress(file,e.loaded,e.total);
}
,false);
	// 完成 xhr.addEventListener("load",function(e){
	// 从文件中删除上传成功的文件 false是不执行onDelete回调方法self.funDeleteFile(file.index,false);
	// 回调到外部self.onSuccess(file,xhr.responseText);
	if(self.uploadFile.length==0){
	// 回调全部完成方法self.onComplete("全部完成");
}
}
,false);
	// 错误 xhr.addEventListener("error",function(e){
	// 回调到外部self.onFailure(file,xhr.responseText);
}
,false);
	xhr.open("POST",self.url,true);
	xhr.setRequestHeader("X_FILENAME",file.name);
	xhr.send(formdata);
}
,// 返回需要上传的文件funReturnNeedFiles:function(){
	return this.uploadFile;
}
,// 初始化init:function(){
	// 初始化方法，在此给选择、上传按钮绑定事件var self = this;
	// 克隆一个自身if (this.dragDrop){
	this.dragDrop.addEventListener("dragover",function(e){
	self.funDragHover(e);
}
,false);
	this.dragDrop.addEventListener("dragleave",function(e){
	self.funDragHover(e);
}
,false);
	this.dragDrop.addEventListener("drop",function(e){
	self.funGetFiles(e);
}
,false);
}
// 如果选择按钮存在if(self.fileInput){
	// 绑定change事件this.fileInput.addEventListener("change",function(e){
	self.funGetFiles(e);
}
,false);
}
// 如果上传按钮存在if(self.uploadInput){
	// 绑定click事件this.uploadInput.addEventListener("click",function(e){
	self.funUploadFiles(e);
}
,false);
}
}
}
;

附件:下载该文件资源,减少时间成本(增值服务)