使用者頭像修改，圖檔選擇上傳，非常常用的功能，本來打算和wap版一樣，也用XMLHttpRequest和FormData來處理圖檔異步上傳，結果在手機上測試的時候發現，onload事件沒有觸發，沒找到原因，本來想省點事才不用插件去實作這個功能的，這下看來隻能用插件了。
準備
首先，這裡需要用到
Camera、
File Transfer這3個插件。怎麼安裝自己看官網吧，很容易。
第一步
修改頭像的第一步，當然是點選目前界面的頭像圖檔或者其他什麼地方，然後彈出一個框，讓使用者選擇是從相冊選擇圖檔還是拍照。
$scope.selectImg = function() {
var hideSheet = $ionicActionSheet.show({
buttons: [{
text: '相冊'
}, {
text: '拍照'
}
],
titleText: '選擇圖檔',
cancelText: '取消',
cancel: function() {
// add cancel code..
},
buttonClicked: function(index) {
navigator.camera.getPicture(cameraSuccess, cameraError, {
sourceType: index
}); //調用系統相冊、拍照
}
});
}
這裡用了ionic的actionsheet，在使用者點選按鈕的時候，改變sourceType的值，這個參數的作用是決定系統是打開相冊還是拍照，剛好0是相冊，1是拍照，是以直接sourceType=index，其他的參數看官網說明
在這裡，我們還傳遞了cameraSuccess和cameraError 兩個參數，分别是選擇照片成功和失敗的回調函數。
第二步
在第一步選擇照片成功後，我們就需要在回調函數cameraSuccess中處理選擇的圖檔檔案，然後上傳到伺服器。
function cameraSuccess(img)
{
$scope.img = img;//這裡傳回的img是選擇的圖檔的位址，可以直接賦給img标簽的src，就能顯示了
window.resolveLocalFileSystemURL(img, function success(fileEntry) {
upload(fileEntry.toInternalURL());//将擷取的檔案位址轉換成file transfer插件需要的絕對位址
}, function() {
alert("上傳失敗");
});
}
function cameraError(img) {
alert("上傳失敗");
function upload(fileURL) {//上傳圖檔
var win = function(r) {//成功回調方法
var response = JSON.parse(r.response);//你的上傳接口傳回的資料
if(response.datas.state){
alert("修改成功");
}else {
alert(response.datas.error);
var fail = function(error) {//失敗回調方法
var options = new FileUploadOptions();
options.fileKey = "pic";//這是你的上傳接口的檔案辨別，伺服器通過這個辨別擷取檔案
options.fileName = fileURL.substr(fileURL.lastIndexOf('/') + 1);
options.mimeType = "image/gif";//圖檔
var ft = new FileTransfer();
ft.upload(fileURL, encodeURI('uploadurl'), win, fail, options);//開始上傳，uoloadurl是你的上傳接口位址
最後
以上是我的圖檔選擇上傳方法，測試過可用，其他類型的檔案上傳也是同理，想要加上進度顯示的話，檢視官網File Transfer插件的使用。
在安裝了以上插件後，驚奇的發現，直接使用之前的異步上傳方案，竟然也可以了。。。。好吧，也許就是因為少了其中了某個插件導緻之前使用不成功吧。總之，使用以上的方案唯一的好處是多了個拍照的功能