js实现文件上传预览

1.文件上传，直接上代码

	// 上传附件，上传完成后更新附件列表
	function uploadFileButton(fileId) {
		console.log('上传...');
		var fileInput = document.getElementById('fileInput');
        //创建表单
		var formData = new FormData();
		if (fileInput.files.length > 0) {
			var file = fileInput.files[0];
			formData.append('upload', file);
			formData.append('参数', "参数值");

		}else {
			return ;
		}

            
        TB_show("正在上传中,请稍后...");
        //上传表单
		xhr = new XMLHttpRequest();
		xhr.open('POST', "上传地址");
		xhr.send(formData);
		xhr.onreadystatechange = function (result) {
			if (xhr.readyState === 4 && xhr.status === 200) {

				//接收返回的结果并展示出来
				var data = JSON.parse(xhr.responseText)
				if (data.code === '0') {
					var file = data.data[0];
					if(file){
						console.log(file);
						//保存附件
						
						var preview = document.getElementById('preview');
						var previewElement = document.createElement('div');
                        //预览事件
						previewElement.innerHTML = '<div><a class="link" onclick="previewPDF(\''+ 附件地址 +'\', \''+ file.realFileName +'\')">'+file.realFileName+'</a> </div>';
						preview.appendChild(previewElement);

						$("#divFileName").hide();
						

					}else {
						alert("上传失败！");
					}
				}
				TB_remove();
			}
		}

	}

2.文件下载地址，经常需要预览功能，通过js就可以实现文件预览功能，下面展示代码

        //文件预览
        function previewPDF(url, filename) {
			this.getBlob(url,  (blob)=> {
				this.previewAS(blob, filename);
			});
		}

        //获取文件流
		function getBlob(url, cb) {
			let xhr = new XMLHttpRequest();
			xhr.open('GET', url, true);
			xhr.responseType = 'blob';
			xhr.onload = function () {
				if (xhr.status === 200) {
					cb(xhr.response);
				}
			};
			xhr.send();
		}

        //文件流转地址
		function previewAS(blob, filename){
			blob = new Blob([blob], {
				type: blob.type+';chartset=UTF-8'
			})
			let fileURL = URL.createObjectURL(blob);
			window.open(fileURL)
		}

3.在远程请求时，页面添加遮罩层，等远程调用结束

/**
 * 公共方法 显示浮动遮罩层
 * tipContent : 提示内容,默认"操作中..." 
 */
function TB_show(tipContent,showTime) {
	try {
		if (document.getElementById("TB_HideSelect") == null) {
		    $("body").append("<iframe id='TB_HideSelect'></iframe><div id='TB_overlay'></div>");		
		}				
		$(window).scroll(TB_position); 		
		TB_overlaySize();	
		if(tipContent==null||tipContent==""||tipContent=='undefined'){
			tipContent="操作中...";
		};
		$("body").append("<div id='TB_load' valign=middle><div id='TB_loadImg'></div><div id='TB_tip'>"+tipContent+"</div></div>");
		TB_load_position();
		$(window).resize(TB_position);
		if (showTime){
			setTimeout(TB_removeMaskLayer,showTime);
		}
	} catch(e) {
	}
}


/**
 * 公共方法 关闭浮动遮罩层 
 */
function TB_remove() {	
	$('#TB_overlay,#TB_HideSelect,#TB_load').remove();
	return false;
}


function TB_overlaySize(){
	if (document.body){
	if (window.innerHeight && window.scrollMaxY) {	
		yScroll = window.innerHeight + window.scrollMaxY;
	} else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
		yScroll = document.body.scrollHeight;
	} else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
		yScroll = document.body.offsetHeight;
  	}
	$("#TB_overlay").css("height",yScroll +"px");
	}
}


function TB_load_position() {
	var pagesize = TB_getPageSize();
	var arrayPageScroll = TB_getPageScrollTop();

	$("#TB_load")
	.css({left: ((pagesize[0] - 100)/2)+"px", top: (arrayPageScroll[1] + ((pagesize[1]-100)/2))+"px" })
	.css({display:"block"});
}