【方法】移動端H5如何調用相冊和相機上傳圖片、音頻、視頻

時間 2020-05-22

標籤方法移動 h5 如何調用相冊相機上傳圖片音頻視頻欄目無線简体版

原文原文鏈接

在移動端上傳圖片方法很簡單，使用HTML5中的input:file供文件上傳。php

《一》經常使用屬性值：html

一、accept：規定文件上傳來提交的文件類型，此屬性只能和type：file配合使用前端

好比：html5

<input type="file" name="pic" id="pic" accept="image/gif, image/jpeg" /> // 這裏規定了只接受GIF和JPEG格式圖像

若是不限制圖像的格式，能夠寫成以下：mysql

<input type="file" accept="image/*" capture="camera">  // 不過其實應該避免使用該屬性，應該在服務器端驗證文件上傳

二、multiple：多文件上傳，好比一次選擇多張圖片上傳ajax

<input id="fileId2" type="file" multiple="multiple" name="file" />

《二》上傳圖片、視頻、音頻方法sql

<input type="file" accept="image/*" capture="camera">  // 調取圖片
<input type="file" accept="video/*" capture="camcorder">  // 調取視頻
<input type="file" accept="audio/*" capture="microphone">  // 調取音頻

在使用上傳文件或圖片的時候，IOS和安卓的展示方式有點不一樣，多環境測試以下：數據庫

安卓：segmentfault

【微信】： 有capture，調相機； 無capture，相冊相機一塊兒調 【QQ】： 有captrue，相冊相機一塊兒調； 無capture，調相冊 【瀏覽器】： 有capture，調相機； 無capture，相冊相機一塊兒調

IOS：瀏覽器

【微信】： 有capture，調相機； 無capture，相冊相機一塊兒調 【QQ】： 有capture，調相機； 無capture，相冊相機一塊兒調 【瀏覽器】： 有capture，調相機； 無capture，相冊相機一塊兒調

上述能夠看到，IOS表現一致，不加capture屬性的時候，會同時調用相冊和相機。

因此若是想要在任何環境下都同時調用相冊和相機，只須要在實際開發過程當中判斷是不是安卓移動設備且處於QQ環境，而後手動添加capture屬性便可。

js判斷當前頁面是安卓/IOS、微信/QQ環境...

《三》讀取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來發送數據。

其主要用於發送表單數據，但也可用於發送鍵值對數據，獨立於表單使用，因而就有如下兩種方法：

一、不使用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數據傳送至服務器

二、使用<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); } });