吶，好久不見，今天要說的是input上傳圖片，主角上場~
<input type="file" capture="camera" accept="image/*">
其實只要type="file"這個屬性就夠了，但是由於這邊是在手機上訪問，要能夠調起手機的照相機和相簿，所以就需要有後面的屬性了。

現在如果我已經在相簿選擇一張圖片了，那怎麼獲取圖片資料呢？
傳統做法就是加上onchange事件，但是由於使用的是angularjs，按道理應該用ng-change事件，不幸的事，並不觸發…實際上onchange是可以觸發的，但是並不能找到controller裡對應的事件處理方法…
程式碼裡寫上 onchange=“uploadDown()”，controller裡也有對應事件，但是報錯：

冥冥之中感覺需要用指令了，在stackoverflow上找到下面這個，就不費腦細胞造輪子啦，哈哈~

app.register.directive('inputOnChange', function(){
  return{
    restrict: 'A',
    link: function (scope, element, attrs) {
      var onChangeFunc = scope.$eval(attrs.inputOnChange);
      element.bind('change', onChangeFunc);
    }
  }
});

下來在input上加上這個屬性就ok了：

<input type="file" capture="camera" accept="image/*" input-on-change="uploadDown">

controller裡事件：

$scope.uploadDown = function () {
      var file = event.target.files[0].name;
      alert('選擇的檔名稱：'+file);
    }

以上取到的是檔案的名字，很明顯，只有檔名可不夠哇，有的同學可能需要base64？

h5裡有個FileReader物件，可以獲取各種資訊…
當然用之前最好還是判斷下當前瀏覽器是否支援：

if(type of FileReader === 'undefined'){
	alert('不支援');
}

ok，完善一下uploadDown()事件：

 $scope.uploadDown = function () {
      var file = event.target.files[0];
       //判斷型別是不是圖片
      if (!/image\/\w+/.test(file.type)) {
        alert("非圖片");
        return;
      }
      var reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = function (e) {
	      alert(this.result);//base64
      }
    }

順便說下FileReader的方法：
readAsBinaryString(file) ------ 將檔案讀取二進位制碼
readAsText(file,[encoding]) ------ 將檔案讀取文字（encoding預設UTF-8）
readAsDataURL(file) ------ 將檔案讀取為DataURL
abort() ------- 中斷讀取操作

以及FileReader的事件：
onabort ---------資料讀取中斷時觸發
onerror ---------資料讀取出錯時觸發
onloadstart --------資料讀取開始時觸發
onprocess --------資料讀取中
onload --------資料讀取成功完成時觸發
onloadend --------資料讀取完成時觸發，無論成功失敗

很明顯，我這邊用的是onload和readAsDataURL(file)
好啦，到目前為止，該取的都取到了，下來就可以用$resource將資料傳給後端服務了~

可能有些同學還是不滿意，因為當前雖然能獲取到所選圖片的資料，但是隻存在於js端，如果需要給使用者預覽呢？

   $scope.uploadDown = function () {
      var file = event.target.files[0];
      $scope.imgSrc=window.URL.createObjectURL(file);//這個方法只支援火狐類，手機上沒人用IE吧，哈哈哈
    };

 <img src="{{imgSrc}}" style="display: block; width: 200px; height: 150px;">

以上即可。