前端实现WEB上传文件进度条文档说明

概况如下:

1、window.URL.createObjectURL将上传的图片转换为blob格式的本地图片,用于图片预览;

2、FormData用于保存上传文件的数据;

3、jquery中$.ajaxSettings.xhr用于捕获上传文件过程中文件流大小信息;

4、文件上传过程中进度通过e.loaded来捕获;

效果图如下:

获取上传文件过程中已经上传部分文件大小的方法,用于渲染进度信息。

// 获取上传文件过程中进度方法
var progressHandingFunction = function (e) {
	if (e.lengthComputable) {
		var percentage = Number(e.loaded * 100 / totalSize).toFixed(2) >= 100 ? '100.00' : Number(e.loaded * 100 / totalSize).toFixed(2);
		var width = Number(percentage) * 3.9;
		$('.process-percentage').text(percentage + '%');
		$('.process-content').width(width);
	}
}

文件上传处理方法,接口调用通过jqueryajax来实现,进度监控通过定义ajaxxhr来实现。

// 上传文件方法
var upload = function (formData) {
	$.ajax({
		type: 'POST',
		url: '/duoduoapi/upload/process', // 上传文件接口路径
		data: formData,
		enctype: 'multipart/form-data',
		processData: false,
		contentType: false,
		dataType: 'json',
		xhr: function () {
			var myXhr = $.ajaxSettings.xhr();
			if (myXhr.upload) {
				myXhr.upload.addEventListener('progress', progressHandingFunction, false);
			}
			return myXhr;
		},
		success: function (response) {
			$('.process-percentage').text(response.message);
		}
	})
}

上传文件监控通过change事件来实现。

// input上传文件change事件
$('#file').on('change', function (e) {
	var file = e.target.files[0];
	console.log(file)
	var name = file.name;
	var size = file.size;
	var type = file.type;
	var url = window.URL.createObjectURL(file);
	var formData = new FormData();
	// 上传文件名称赋值
	$('.upload-input p').text(name);
	// 每次都重置背景图
	$('.upload-img').css('background', 'rgba(0,0,0,0.1)');
	// 压缩包
	if (type == 'application/x-zip-compressed') {
		$('.fa-file-zip-o').addClass('on').siblings().removeClass('on');
	} else if (type.indexOf('image') != -1) {
		// 图片
		var image = new Image();
		image.src = url;
		image.onload = function () {
			var width = image.width;
			var height = image.height;
			$('.fa').removeClass('on');
			$('.upload-img').css({
				'background': 'url(' + url + ') no-repeat center center',
				'backgroundSize': 'contain'
			})
		}
	} else if (type == 'application/pdf') {
		// pdf
		$('.fa-file-pdf-o').addClass('on').siblings().removeClass('on');
	} else if (type == 'text/plain') {
		// text文档
		$('.fa-file-text-o').addClass('on').siblings().removeClass('on');
	} else if (type == 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' || type == 'application/msword') {
		// word文档
		$('.fa-file-word-o').addClass('on').siblings().removeClass('on');
	} else if (type == 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' || type == 'application/vnd.ms-excel') {
		// excel文档
		$('.fa-file-excel-o').addClass('on').siblings().removeClass('on');
	} else if (type == 'application/vnd.openxmlformats-officedocument.presentationml.presentation' || type == 'application/vnd.ms-powerpoint') {
		// powerpoint文档
		$('.fa-file-powerpoint-o').addClass('on').siblings().removeClass('on');
	} else {
		// 其他文件类型
		$('.fa-file-o').addClass('on').siblings().removeClass('on');
	}
	totalSize = size;
	formData.append('file', file);
    upload(formData);			
})

预览地址:朵朵视野-前端实现WEB上传附件进度条

下载地址:朵朵视野-前端实现WEB上传附件进度条