清除附件,附件上传,显示进度

132 阅读1分钟

// 清除附件

function clearFile(file){
		var ie = (navigator.appVersion.indexOf("MSIE")!=-1);  
		if( ie ){  
			var file2= file.cloneNode(false);  
			file2.onchange= file.onchange;  
			file.parentNode.replaceChild(file2,file);  
		}else{  
			$(file).val("");
		}  
	}

附件上传

function cert_file_upload(t){
		// 判断是否支持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>');
			clearFile(t);
			return;
		}
		var file = t[0].files[0];
		if(file){
			if(file.size>1024*1024*50){ 
				createAlert('提示','附件不得大于50MB');
				clearFile(t);
				return;
			}
			// 判断DOM的数量,如果小于1就显示
			var fileSize = 0;
			if (file.size > 1024 * 1024)
				fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString() + 'MB';
			else
				fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + 'KB';
			uploadDom = t.parents('tr').eq(0);
			// 执行上传操作
			AjaxUploadCertForm(uploadDom,file.name);
			// 绑定事件
			uploadDom.find('.delete-this').on('click',function(){
				t.parents('tr').eq(0).remove();
			});
			clearFile(t);
		}else{
			clearFile(t);
			return;	
		}	
	}

显示进度

// 绑定上传函数
	function AjaxUploadCertForm(p,filename){
		var fd = new FormData();
		fd.append("files", p.find('.file-btn')[0].files[0]);
		var xhr = new XMLHttpRequest();
		// 添加进度条监听
		p.find('.speed-text').show();
        xhr.upload.addEventListener("progress", function(e){
			if (e.lengthComputable) {
				var percentComplete = Math.round(e.loaded * 100 / e.total);
				if(percentComplete.toString()=='100'){
					p.find('.speed-text').text('已上传完成,请稍后');
					return;	
				}
				p.find('.speed-text').text('已上传'+percentComplete.toString() + '%');
			} else {
				return false;
			}
		}, false);
		// 错误监听
		xhr.addEventListener("error", function(e){
			createAlert('提示','附件上传出错:'+e);
			return;
		}, false);
		// 完成监听
		xhr.addEventListener("load", function(e){
			var data = $.parseJSON(e.target.responseText);
			if(data.status!=1){
				createAlert('提示',data.msg);
				p.find('.speed-text').html('<span style="color:#e43c59">上传失败</span>');
				return;	
			}else{
				p.find('.speed-text').hide();
				p.find('.file-name').val(filename);
				p.find('.file-url').val(data.urlAddress);
				p.find('.uploaded').html('<i class="glyphicon glyphicon-file"></i> <a href="'+data.url+'" target="_blank">'+filename+'</a>');
				p.find('.uploaded').show();
				p.find('.uploader-btn').find('span').text('修改附件');
			}
		}, false);
		xhr.open("POST", p.find('.file-btn').attr('data-upload'));
        xhr.send(fd);
	}