ajax上传预览

Posted 2020-10-20 carol72

html

<input type="file" id="file" />

JS

var file1=document.getElementById("file");

file1.onchange=function(){
	var f = this.files[0];
	
	//格式化文件
	var fr = new FileReader();
	
	//图片
	if(f.type.indexOf(‘image‘)!=-1){
		alert(‘上传的是图片‘);
		//监控格式化是否完成
		fr.onload = function(){
			//创建一个image对象。
			var img = new Image();
			//监控图片是否加载完成。
			img.onload = function(){
				alert(‘图片加载完毕‘);
			};
			//给img地址。
			img.src = fr.result;
			//把img添加到页面。
			document.body.appendChild(img);
		};
		//添加需要格式化的文件。
		fr.readAsDataURL(f);
		return;
	}
	
	if(f.type.indexOf(‘text‘)!=-1){
		alert(‘上传的是文本‘);
		fr.onload = function(){
			console.log(fr.result);
		};

		//添加需要格式化的文本文件
		fr.readAsText(f,‘UTF-8‘);
		return;
	}
	console.log(f);
}