利用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.文件读写的三种方式

公共代码:

	<input type="file" class="file" multiple>
    <button>上传文件</button>
    <div style="widows: 300px;height: 400px;"></div>
    <img src="" alt="">

	<script>
			var fileInput = document.querySelector('.file')
	        var btn = document.querySelector('button')
	        var showDiv = document.querySelector('div')
	        var img = document.querySelector('img')
	</script>

(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)
        }
	}