阿里云 OSS 上传插件layui-aliossuploader升级为带进度条及单项回调

本文介绍了如何将阿里云OSS上传插件layui-aliossuploader升级,添加进度条功能和单项上传完成的回调函数。作者通过调试和分析,实现了基于ajax的上传进度显示,并分享了修改后的aliossuploader.js源码,方便他人使用。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

最近有个项目,要上传无数素材到阿里云,找了很多layui的上传组件,感觉要么复杂化,要么就是没带进度条,layui官方的进度条是带了,但是没有上传到阿里云oss的,而且在折腾成功之前,layui的file还在前面,截止2022年11月8日,layui官方才更新了,把file放到表单域的后面。 但是我是没有多少去折腾官方那种上传oss的。后面找到了这个layui-aliossuploader的第三方组件,一番折腾,感觉蛮好。美中不足的是,没有进度条。
去作者blog查看,作者也说不会… 经历痛苦的搜索之后…思来想去,不就是ajax 嘛,看能否从这入手,加上这个进度条。。。。 debug一下午后,奇迹般搞定了。

然后再回过头来看,我靠,如此简单?真的是自己太菜了!
搁这保存起来警示警示吧。
带进度条的 aliossuploader.js

layui.extend({
   }).define(['layer', 'upload','element'], function(exports) {
   
	var $ = layui.$,
		layer = layui.layer,
		upload = layui.upload,
		element=layui.element, //新加
		allUploaded = {
   },
		policyFailed = null,
		itemUploaded =null,
		uploadData = [],
		prefixPath,
		layerTitle,
		filesss = {
   },
		successCount = 0,
		uploadCount = 0,
		filesListView = null,
		multiple = false,
		multipleFileArray = [],
		multipleFileKeyArray = [],
		uplaod = layui.upload;
	//加载样式

	var Class = function(options) {
   
		var that = this;
		that.options = options;
		that.init();
	};

	Class.prototype.init = function() {
   
		var that = this,
			options = that.options;
		if (options.layerArea) {
   
			layerArea = options.layerArea;
		} else {
   
			layerArea = 'auto';
		}
		if (options.multiple) {
   
			multiple = true;
		}
		if (!that.strIsNull(that.options.fileType)) {
   
			fileType = that.options.fileType;
		}else{
   
			fileType = 'file';
		}
		if (!that.strIsNull(that.options.httpStr)) {
   
			httpStr = that.options.httpStr;
		} else {
   
			httpStr = 'https';
		}
		if (!that.strIsNull(that.options.policyFiled)) {
   
			policyFiled = that.options.policyFiled;
		} else {
   
			policyFiled = 'policy';
		}
		if (!that.strIsNull(that.options.accessidFiled)) {
   
			accessidFiled = that.options.accessidFiled;
		} else {
   
			accessidFiled = 'accessid';
		}
		if (!that.strIsNull(that.options.codeFiled)) {
   
			codeFiled = that.options.codeFiled;
		} else {
   
			codeFiled = '';
		}
		if (!that.strIsNull(that.options.codeStatus)) {
   
			codeStatus = that.options.codeStatus;
		} else {
   
			codeStatus = 0;
		}
		if (!that.strIsNull(that.options.signatureFiled)) {
   
			signatureFiled = that.options.signatureFiled;
		} else {
   
			signatureFiled = 'signature';
		}
		if (!that.strIsNull(that.options.region)) {
   
			region = that.options.region;
		}
		if (!that.strIsNull(that.options.prefixPath)) {
   
			prefixPath = that.options.prefixPath;
		} else {
   
			prefixPath = '';
		}
		if (!that.strIsNull(that.options.policyUrl)) {
   
			policyUrl = that.options.policyUrl;
		}
		if (typeof that.options.policyData != 'undefined') {
   
			policyData = that.options.policyData;
		} else {
   
			policyData = {
   };
		}
		if (
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

3cts

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值