從實戰中學前端：打造本身的html5文件上傳插件

寫在前面的廢話：文件上傳在web開發當中很是廣泛，好比新聞圖片、用戶頭像、商品圖片等等，在html5幾乎佔據統治地位（可是依然有部分頑固派人士）的狀況下，基於html5的文件上傳也佔了多數（在html5以前爲了更加美觀啥的好多都會藉助flash），如今也有比較多的開源插件可用，如百度的webuploader，這裏咱們來本身實現一個簡易的文件上傳插件，高手請繞道。

文件上傳初體驗

<!-- 這裏用了前邊的按鈕樣式，不是重點 -->
<input type="file" id="logo" name="logo" /><button class="btn btn-bg-green">上傳</button>

效果圖：

美化上傳控件樣式

基本思路：文件上傳控件屬因而很差直接控制樣式的控件，這裏咱們轉變一下思路，將控件放在一個能夠任意美化的div中，而後將此上傳控件設爲透明，大小恰好爲div的大小。

<div class="upload">
    <div>選擇文件</div>
    <input type="file" id="logo" name="logo" />
</div>
<button class="btn btn-bg-green">上傳</button>

.upload{
	width: 80px;
	height: 30px;
	color: white;
	padding: 5px;
	text-align: center;
	border-radius:5px ;
	background: green;
}
.upload>input[type='file']{
	filter:alpha(opacity=0); /*IE濾鏡*/
	-moz-opacity:0; /*Firefox私有*/
	opacity:0;/*其餘*/
	height: 30px;
	width: 80px;
	/*background: black;*/
	position: relative;
	left: -6px;
	top: -23px;
}

效果：

利用jquery ajax實現異步上傳插件

jquery是一個經常使用的js插件，封裝了js的原生api，使js操做大大簡化，如js原生要得到上述file控件，須要document.getElementById("logo");而經過jquery這樣就能：$("#logo")達到目的。

注：這裏不須要去徹底理解jquery，知道就行。

ajax全稱異步JavaScript和XML，通俗點做用就是不須要更新整個頁面，只需更新須要的部分，如瀏覽新聞網站時跳頁，只需更新新聞列表便可，而諸如導航、熱點新聞都不須要更新，暫且這麼理解就好了，想深刻理解的，度娘便可。

從jquery官網或其餘渠道下載jquery文件，引入到項目中。

插件代碼以下：

;
!
(function() {
	$Y = {
		upload: function(p) {
			var fileObj = document.getElementById(p.id).files[0];
			if(!fileObj)
				return false;
			if(p.before)
				p.before(document.getElementById(p.id));
			if(p.size < fileObj.length) {
				p.error("文件大小超過限定");
				return false;
			}
			if(p.type.indexOf('jpg') == -1) {
				p.error("文件格式不符合要求");
				return false;
			}
			var formData = new FormData();
			formData.append('file', fileObj);
			$.post(p.url, formData, function(res) {
				p.success(res);
			});
		}
	}
})();

調用方法：

$("button").click(function() {
	$Y.upload({
		id: 'logo',
		url:'',
		type: 'jpg|png|gif',
		size: 2,
		before: function(input) {
			//文件上傳前，如實現圖片預覽
			//input是當前file控件
			//此回調不是必須的
		},
		success: function(res) {
			//res是服務端定義的任何格式，建議爲json格式
			//只要通過了服務器端就好執行此回調
		},
		error: function(res) {
			//res是出錯的提示文本
			alert(res);
		}
	});
});

相關說明： $.post(url,data,function)是jquery ajax的post提交方式，其中url是服務端地址，data爲參數形如：{id:1,name:"Tom"}，function是異步執行完後的回調函數。

上傳插件$Y.upload參數說明： id：上傳控件的id、type：能夠上傳的文件格式、size：文件大小限制，單位爲kb、before：文件上傳前的回調、success：文件異步上傳到服務端的回調，不管是否成功上傳，只要通過了服務端即會調用、error是文件在上傳前驗證過程當中發現問題的回調，如格式不對，大小超過限制等。

FormData是XMLHttpRequest Level 2 添加了一個新的接口——FormData。利用 FormData 對象，咱們能夠經過 JavaScript 用一些鍵值對來模擬一系列表單控件，咱們還可使用 XMLHttpRequest 的 send() 方法來異步的提交表單。與普通的 Ajax 相比，使用 FormData 的最大優勢就是咱們能夠異步上傳二進制文件。

新的html5 file api能夠實現圖片預覽及其餘很是有用的操做，這裏給一個圖片預覽函數：

function showPreview(obj) {
	var file = document.getElementById("logo").files[0];
	var reader = new FileReader();
	// 將文件以Data URL形式進行讀入頁面
	reader.readAsDataURL(file);
	reader.onload = function(e) {
		obj.innerHTML = '<img src="' + this.result + '" alt=""/>';
	}
}

到目前爲止實現了一個基本的文件上傳插件，還有好比圖片預覽、文件格式限制、多文件上傳、文件進度等都沒有去實現，這裏僅僅是拋磚引玉，各位能夠本身去實現，這樣子才能快速提升技術。

PS：沒有提供後端實現，在後端只須要根據以往的方式獲取再上傳便可。