原生js 上传图片 显示进度等 自用

原生js 上传图片 显示进度等 自用

// 上传图片操作
	function AjaxUploadImg(p, parent) {
		var fd = new FormData();
		fd.append("files", parent.find('.img-file-btn')[0].files[0]);
		var xhr = new XMLHttpRequest();
		// 错误监听
		xhr.addEventListener("error", function (e) {
			createAlert('提示', '附件上传出错：' + e);
			return; form.serialize()
		}, false);
		// 完成监听
		xhr.addEventListener("load", function (e) {
			p.find('.upload-img-loading').remove();
			var data = $.parseJSON(e.target.responseText);
			if (data.status != 1) {
				createAlert('提示', data.msg);
				return;
			} else {
				p.find('input').before('<span class="glyphicon glyphicon-trash delete-this-img" title="删除"></span>');
				// 绑定事件
				p.find('.delete-this-img').on('click', function () {
					p.remove();
				});
				p.find('input').val(data.urlAddress);
			}
		}, false);
		xhr.open("POST", parent.find('.img-file-btn').attr('data-upload'));
		xhr.onreadystatechange = function () {
			if (xhr.readyState === 4 && xhr.status == 200 ) {
				let imgObj = {};
				data = JSON.parse(xhr.responseText); 
				imgObj.urlAddress =data.urlAddress;
				imgObj.url =data.url;
				pdcaImgArr.push(imgObj);
			}
		};
		xhr.send(fd);
	}
	// 绑定image input change事件
	$('.create-doc-panel').find('.img-file-btn').on('change', function () {
		p = $(this).parents('.create-doc-panel').eq(0);
		// 判断是否支持file api
		if (window.File && window.FileReader && window.FileList && window.Blob) {
		} else {
			createAlert('提示', '您的浏览器版本过旧，不支持附件上传，请下载最新浏览器：<a href="https://www.baidu.com/s?wd=%E8%B0%B7%E6%AD%8C%E6%B5%8F%E8%A7%88%E5%99%A8&rsv_spt=1&rsv_iqid=0xd572478300030943&issp=1&f=3&rsv_bp=1&rsv_idx=2&ie=utf-8&rqlang=cn&tn=baiduhome_pg&rsv_enter=0&oq=html5%25E6%25B5%258F%25E8%25A7%2588%25E5%2599%25A8&rsv_t=3999n7WaOmtKvMspkDOAMPtkcDqNIdH2y3VzJZdI24sb%2BuhnZDGwtmREWX9zZ4Gl8%2BNu&inputT=1943&rsv_pq=b38e1b860004ea94&rsv_sug3=189&rsv_sug1=92&rsv_sug7=100&rsv_sug2=0&rsv_sug4=1943" target="_blank">下载地址</a>');
			clearImageFile(p);
			return;
		}
		var file = $(this)[0].files[0];
		if (file) {
			if (file.size > 1024 * 1024 * 5) {
				createAlert('提示', '图片不得大于5MB');
				clearImageFile(p);
				return;
			}
			if (!$(this)[0].files[0].type.match(/image.*/)) {
				createAlert('提示', '请选择正确的图片!');
				clearImageFile(p);
				return;
			}
			var uploadHtml = [
				'<div class="thumb-img-item">',
				'<input type="hidden" name="images[]" value="" />',
				'<img src="" />',
				'<div class="upload-img-loading">',
				'<span></span>',
				'</div>',
				'</div>'
			].join('');
			uploadDom = $(uploadHtml);
			var reader = new FileReader();
			reader.readAsDataURL($(this)[0].files[0]);
			reader.onload = function (e) {
				uploadDom.find('img')[0].src = this.result;
				// pdcaImgArr.push(this.result);
			}
			// 执行上传操作
			AjaxUploadImg(uploadDom, p);
			console.log('$$$$$$$$$',$(this));
			$(this).parents('.img-upload').parent().find('.clear').before(uploadDom);
			clearImageFile(p);
		} else {
			clearImageFile(p);
			return;
		}
	});