關於file文件，通過file文件對圖片進行操作

html5實現圖片預覽和查看原圖

1. fileReader

FileReader接口的方法 FileReader接口有4個方法，其中3個用來讀取文件，另一個用來中斷讀取。無論讀取成功或失敗，方法並不會返回讀取結果，這一結果存儲在result屬性中。 

方法名	參數	描述
readAsBinaryString	file	將文件讀取爲二進制編碼
readAsText	file[, encoding]	按照格式將文件讀取爲文本，encode默認爲UTF-8
readAsDataURL	file	將文件讀取爲DataUrl
abort	(none)	終端讀取操作

FileReader接口事件 FileReader接口包含了一套完整的事件模型，用於捕獲讀取文件時的狀態。

事件	描述
onabort	中斷
onerror	出錯
onloadstart	開始
onprogress	正在讀取
onload	成功讀取
onloadend	讀取完成，無論成功失敗

2. 使用fileReader讀取圖片

從上面的表格中，我們可以大致瞭解fileReader提供哪些方法和事件，不過本文主要是講解圖片的讀取，那麼我們就是用readAsDataURL()就可以了。不過，在進行這一切之前，我們必須檢測當前的瀏覽器是否支持html5的fileReader，別進行了一系列的處理和操作，結果js報錯，說fileReader沒有定義。就好像對一個女孩兒又親又啃，馬上要提槍上馬了，結果發現這是個純爺們。

if(!(window.FileReader && window.File && window.FileList && window.Blob)){
    show.innerHTML = '您的瀏覽器不支持fileReader';
    upimg.setAttribute('disabled', 'disabled');
    return false;
}

好的，讓我們先看下demo演示：【狠狠點擊這裏】

2.1 讀取單張圖片

使用input[type=file]控件讀取文件，然後監聽這個控件的change事件，若讀取的文件個數大於零，那麼就進行下一步的操作：

<input type="file" id='upimg' />
var upimg = document.querySelector('#upimg');
upimg.addEventListener('change', function(e){
    var files = this.files;
    if(files.length){
    	// 對文件進行處理，下面會講解checkFile()會做什麼
        checkFile(this.files);
    }
});

現在我們只能選取一張圖片，針對選取的這張圖片，我們使用fileReader進行圖片的處理

// 圖片處理
function checkFile(files){
	var file = files[0];
	var reader = new FileReader();
	// show表示<div id='show'></div>，用來展示圖片預覽的
	if(!/image\/\w+/.test(file.type)){
        show.innerHTML = "請確保文件爲圖像類型";
        return false;
    }
    // onload是異步操作
	reader.onload = function(e){
		show.innerHTML = '<img src="'+e.target.result+'" alt="img">';
	}
	reader.readAsDataURL(file);
}

現在，就可以在頁面上看到圖片了。審查元素後我們能夠看到，圖片地址是個base64的字符串，如：’data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sA……’

2.2 讀取多張圖片

多張圖片和單張圖片的處理過程很相似，但是也還是有區別的，因爲reader.onload()是一個異步的操作，進行下一步的操作時必須在這個方法裏

<input type="file" id='upimg' multiple />
// change事件沒有改動
// 圖片處理
function checkFile(files){
	var html='', i=0;
	var func = function(){
		if(i>=files.length){
			// 若已經讀取完畢，則把html添加頁面中
			show.innerHTML = html;
		}
		var file = files[i];
		var reader = new FileReader();

		// show表示<div id='show'></div>，用來展示圖片預覽的
		if(!/image\/\w+/.test(file.type)){
            show.innerHTML = "請確保文件爲圖像類型";
            return false;
        }
		reader.onload = function(e){
			html += '<img src="'+e.target.result+'" alt="img">';
			i++;
			func(); //選取下一張圖片
		}
		reader.readAsDataURL(file);
	}
	func();
}

2.3 拖拽拉取圖片

拖拽事件，採用的是html5中的drag和drop，本文不着重介紹這兩個方法，僅僅是講解如何使用。

首先，我們設置一塊拖拽區域，告訴用戶應該把圖片拖拽到什麼位置：

<style>
	.drag{ width: 400px;height: 100px;border: 1px dotted #333; text-align: center; line-height: 100px; color: #aaa; display: inline-block;}
    .drag_hover{background: #FAD6F9;}
</style>
<span class='drag' id="drag">拖拽區域</span>

然後，我們給drag區域綁定上拖拽事件

var drag = document.getElementById('drag');
drag.addEventListener('dragenter', function(e){
    // 拖拽鼠標進入區域時
    this.className = 'drag_hover';
}, false);
drag.addEventListener('dragleave', function(e){
    // 拖拽鼠標離開區域時
    this.className = '';
}, false);
drag.addEventListener('drop', function(e){
    // 當鼠標執行‘放’的動作時，執行讀取文件操作
    var files = e.dataTransfer.files;
    this.className = '';
    if (files.length != 0) {
        checkFile(files);
    };
    e.preventDefault();
}, false)
drag.addEventListener('dragover', function(e){
    // 當對象拖動到目標對象時觸發
    e.dataTransfer.dragEffect = 'copy';
    e.preventDefault();
}, false);

這裏有個需要注意的地方：需要給dragover和drop添加阻止默認事件，否則瀏覽器會採用file:///的方式打開文件。drop事件執行後就是進行checkFile()，後續的操作與使用input[type=file]的操作一樣。

3. 點擊查看原圖

當我們點擊圖片查看原圖時，需要知道圖片的原始尺寸。可能你會想到使用img.width和img.height，對，這個確實能獲取到圖片的長和寬，但是，這個長和寬是經過css修飾後的，不是圖片原始的尺寸。如果要獲取圖片的原始尺寸，我們可以在js中創建一個imgs對象，然後把那張圖片的地址給了這個imgs對象，然後獲取imgs對象的尺寸，這樣就能獲取到圖片的原始尺寸了。

var imgs = new Image();
imgs.src = img.src; // 給新的img對象鏈接
console.log(imgs.width, imgs.height);

而在html5中，我們不用再那麼麻煩的創建一個無用的img對象了，直接使用給出的屬性即可。

console.log(img.naturalWidth);  // 獲取圖片的原始的寬度
console.log(img.naturalHeight); // 獲取圖片的原始的高度