jQuery ajax 拓展文件上传

最新推荐文章于 2024-04-21 01:35:00 发布

yun_hou

最新推荐文章于 2024-04-21 01:35:00 发布

阅读量127

点赞数 2

分类专栏： js 文章标签： jQuery ajax upload file uploader

本文链接：https://blog.csdn.net/yun_hou/article/details/88688753

版权

js 专栏收录该内容

13 篇文章 2 订阅

订阅专栏

HTML

<input name='' type="file" id="file-uploader">

js (公共js中配置以下代码)

以下文件依赖 jQuery 所以需要提前引入，alert 提示非常影响用户体验，可自定义提示样式

/**
 * 上传
 * @param {String} uploadUrl 上传服务地址
 * @param {String} fileType 上传类型：图片 1，视频 2，文件 3，音频 4
 * @param {Number} maxSize 限制上传文件大小，单位b 例：5*1024 限制大小为5Kb
 * @param {Function} beforeUpload 上传前的处理，返回本地路径和当前dom
 * @param {Function} uploaded 上传完成后的回调，返回完整路径
 */
$.fn.uploader = function (config) {
	var opt = $.extend({
		uploadUrl: '', //此处配置默认url
		fileType: 1,
		type: [],
		beforeUpload: function () {},
		uploaded: function () {}
	}, config);
	if (!opt.type.length) {
		switch (opt.fileType) {
			case 1:
				opt.type = ['jpg', 'jpeg', 'gif', 'bmp', 'png'];
				break;
			case 2:
				opt.type = ['mp4', 'webm'];
				break;
			case 3:
				opt.type = ['doc', 'xls', 'ppt', 'pdf', 'docx', 'xlsx', 'pptx', 'txt', 'wps'];
				break;
			case 4:
				opt.type = ['mp3', 'ac3'];
				break;
			default:
				alert('参数配置错误');
		}
	}
	$(this).each(function () {
		$(this).off('change').on('change', function () {
			var $this = $(this),
				fd = new FormData();
			if (opt.beforeUpload({
					url: URL.createObjectURL($this[0].files[0]),//获取本地文件路径
					el: $this
				}) === false) {
				$this.val('');
				return;
			}
			if (opt.type.indexOf($this[0].files[0].name.split('.').reverse()[0].toLowerCase()) < 0) {
				alert('只能上传 ' + opt.type.join(', '));
				$this.val('');
				return;
			}
			// 图片大小检测
			if (opt.maxSize && $this[0].files[0].size > opt.maxSize) {
				alert('最大只能上传 ' + (opt.maxSize / 1024) + 'kb');
				$this.val('');
				return;
			}
			fd.append('fileType', opt.fileType + '');
			fd.append('file', $this[0].files[0]);
			//contentType 请求头 默认值是  setRequestHeader("Content-type","application/x-www-form-urlencoded");false的含义是 不额外的设置头
			//processData是否会转化数据，如果要发送formData 设置为false 不需要转化
			$.ajax({
				url: opt.uploadUrl,
				type: 'post',
				data: fd,
				contentType: false, // 当有文件要上传时，此项是必须的，否则后台无法识别文件流的起始位置
				processData: false, // 是否序列化data属性，默认true(注意：false时type必须是post)
				success: function (data) {
					$this.val('');
					opt.uploaded({
						name: data.fileName.replace(/<|>|\/|\\/g, ''),
						url: data.url,
						suffix: data.suffix,
						el: $this
					});
				}
			})
		});
	});
};

方法调用

$('#file-uploader').uploader({
	type: ['jpg', 'gif', 'png'],
	maxSize: 5 * 1024 * 1024,  //5M
	beforeUpload: function (data) {
		//上传之前的操作
		console.log(data);
		let img = new Image();
		img.src = data.url;
		img.onload = () => {
			//判断如果img的宽高不为下面尺寸，则禁止上传
			if (!((img.width === 512 || img.width === '512') && (img.height === 1024 || img.height === '1024'))) {
				return false;
			}
		}
	},
	uploaded: function (data) {
		//上传成功后的操作
		console.log(data);
	}
})