利用FileReader实现文件读取操作

1.基本知识(FileReader)

(1)描述
FileReader是HTML5中新增的一个类，用来对input中[文件上传操作]进行处理的类通过该类创建的对象中提供了一些方法，能够对上传的文件进行预先的读写，从而在某种情况下实现预览效果.

(2)说明
文件读写一般分为三种方式:
①文本读取
②图片URL读取
③二进制流读取

(3)语法

		var fileReader = new FileReader()
		fileReader.readAs...(从input中获得的文件流)
		fileReader.onload = function(){
		   		console.log(fileReader.result)		
		  }

2.文件读写的三种方式

公共代码:

	
    上传文件
    

    

	

(1)readAsText():读取文本txt内容

	btn.onclick = function(){
		var fileReader = new FileReader()
		fileReaderAsText(fileInput.files[0])
		fileReader.onload = function(){
			console.log(fileReader.result)
			showDiv.innerHTML = fileReader.result
		}
	}

(2)readAsDataURL():实现图片预览

	btn.onclick = function(){
		var fileReader = new FileReader();
		fileReader.readAsDataURL(fileInput.files[0])
            fileReader.onload = function(){
                console.log(fileReader.result)
                img.src = fileReader.result
            }
	}

(3)readAsArrayBuffer():利用二进制流实现图片预览

	btn.onclick = function(){
			var fileReader = new FileReader();
			filereader.readAsArrayBuffer(fileInput.files[0])
			filereader.onload = function(){
	            console.log(filereader.result)
	            var blob = new Blob([filereader.result])
	            img.src = URL.createObjectURL(blob)
        }
	}