在移動端上傳圖片方法很簡單，使用HTML5中的input:file供文件上傳。
《一》常用屬性值：
1、accept：規定文件上傳來提交的文件類型，此屬性只能和type：file配合使用
比如：
<input type="file" name="pic" id="pic" accept="image/gif, image/jpeg" /> // 這裏規定了只接受GIF和JPEG格式圖像
如果不限制圖像的格式，可以寫成如下：
<input type="file" accept="image/*" capture="camera"> // 不過其實應該避免使用該屬性，應該在服務器端驗證文件上傳
2、multiple：多文件上傳，比如一次選擇多張圖片上傳
<input id="fileId2" type="file" multiple="multiple" name="file" />
《二》上傳圖片、視頻、音頻方法
<input type="file" accept="image/*" capture="camera"> // 調取圖片
<input type="file" accept="video/*" capture="camcorder"> // 調取視頻
<input type="file" accept="audio/*" capture="microphone"> // 調取音頻
在使用上傳文件或圖片的時候，IOS和安卓的展現方式有點不同，多環境測試如下：
安卓：
【微信】： 有capture，調相機； 無capture，相冊相機一起調 【QQ】： 有captrue，相冊相機一起調； 無capture，調相冊 【瀏覽器】： 有capture，調相機； 無capture，相冊相機一起調
IOS：
【微信】： 有capture，調相機； 無capture，相冊相機一起調 【QQ】： 有capture，調相機； 無capture，相冊相機一起調 【瀏覽器】： 有capture，調相機； 無capture，相冊相機一起調
上述可以看到，IOS表現一致，不加capture屬性的時候，會同時調用相冊和相機。
所以如果想要在任何環境下都同時調用相冊和相機，只需要在實際開發過程中判斷是否是安卓移動設備且處於QQ環境，然後手動添加capture屬性即可。
《三》讀取input上傳的圖片，並將其展示
知識點：FileReader
// 構造方法
var reader = new FileReader();
// 讀取文件中的數據，FileReader提供如下方法：
readAsText(file, encoding); // 以純文本的形式讀取文件，並將讀取到文本保存在result屬性中。第二個參數指定編碼類型，可選
readAsDataURL(file); // 以數據URL的形式讀取文件，並保存在result屬性中
readAsBinaryString(file); // 讀取文件並將一個字符串保存在result屬性中，字符串中每一個字符表示一個字節
readAsArrayBuffer(file); // 將一個包含文件內容的ArrayBuffer保存在result中
所以，我們利用readDataURL(file)方法將圖片進行展示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>上傳圖片文件並回顯</title>
</head>
<body>
<input type="file" id="#file" multiple>
<div class="show-box"></div>
<script>
var input = document.getElementsByTagName('input')[0],
showBox = document.getElementsByClassName('show-box')[0];
input.onchange = function () {
var len = this.files.length; // 對於input上傳的圖片，使用dom.files可以獲取圖片信息
for(let i = 0; i < len; i++) {
let fileImg = new FileReader();
fileImg.readAsDataURL(this.files[i]); // readAsDataURL方法將圖片轉爲base64格式存儲於result中
fileImg.onload = function() {
let oImg = new Image();
oImg.src = this.result; // 使用FileReader的result屬性獲取圖片base64信息
showBox.appendChild(oImg);
}
fileImg.onerror = function(e) {
console.log('error' + e);
}
}
}
</script>
</body>
</html>
《四》FormData結合ajax將圖片上傳至服務器
知識點：FormData
FormData對象用以將數據編譯成鍵值對，以便用XMLHttpRequest來發送數據。
其主要用於發送表單數據，但也可用於發送鍵值對數據，獨立於表單使用，於是就有以下兩種方法：
1、不使用form表單，而使用鍵值對方式爲FormData對象添加字段方式上傳文件
方法：FormData.append()
// append()兩個重載函數
formData.append(name, value);
formData.append(name, value, filename); // filename可選
// 還有set()函數，它和append主要區別是：
// append 如果鍵已經存在，會將新值添加到已有的值集合後面
// set 如果鍵已經存在，會將新值覆蓋原來的值
value值可以是Blob或者Flie類型的值。
MDN中是這麼說的：
其中Blob(binary large object)，通俗講就是大的二進制對象，可以是圖片、音頻，而且Blob常常是數據庫中用來存儲二進制文件的字段類型，例如mysql數據庫。
再說回到第三個參數，只有當value是blob或者file類型的時候，纔可以添加第三個參數。當第二個參數爲字符串時，會報錯：
回到案例，上述例子中我們使用的就是沒有form表單的，所以我們基於《三》添加以下代碼：
// 我們創建一個FormData對象，然後每獲取一個文件，就使用append()方法添加字段
var formData = new FormData();
// ...
fileImg.onload = function () {
// ...
formData.append(files[i].name, files[i]); // 鍵值對形式 此處append()第二個參數傳入的是文件對象File類型
}
// 然後再使用ajax將formData數據傳送至服務器
2、使用<form>表單初始化FormData對象方式上傳文件
這裏我們使用jQuery來實現。
html代碼：
// 使用form表單
<form id="uploadForm">
<input id="file" type="file" name="file"/>
<button id="upload" type="button">upload</button>
</form>
js代碼：
var formData = new FormData($('#uploadForm')[0]); // 注意：使用參數是一個DOM對象，而非jQuery對象；且必須是是form表單元素
// formData.append('num', 1)； // 也可以向已有表單的數據基礎上，繼續添加新的鍵值對
$.ajax({
url: 'file.php',
type: 'POST',
data: formData, // 上傳formdata封裝的數據
dataType: 'JSON',
cache: false, // 不緩存
processData: false, // jQuery不要去處理髮送的數據
contentType: false, // jQuery不要去設置Content-Type請求頭
success:function (data) { //成功回調
console.log(data);
}
});
在我們使用form表單初始化對象時，參數必須選擇form表單元素，否則就會報錯：
【參考文章】
FormData對象的作用和用法、通過Ajax使用FormData對象無刷新上傳文件
《五》圖片壓縮後再上傳服務器
請轉至文章：如何實現圖片壓縮並使用FormData上傳
【參考文章】