溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了Html如何實現手機拍照和選擇上傳功能，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
本文實例為大家分享了H5手機拍照和選擇上傳的，具體內容如下
1. html/ js代碼：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta http-equiv="Access-Control-Allow-Origin" content="*" />
<link rel="stylesheet" href="../../css/mui.min.css" >
<link rel="stylesheet" type="text/css" href="../../css/app.css" />
<link rel="stylesheet" type="text/css" href="../../css/icons-extra.css" />
<link rel="stylesheet" type="text/css" href="../../css/mui.picker.min.css" >
</head>
<body onload="startTime()">
<div class="mui-card" >
<div class=" mui-card-media">
<img class="a" id="img" />
<label for="myFile">
<span id="format" class="a mui-icon mui-icon-camera" ></span>
</label>
<input type="file" capture="camera" id="myFile" onchange="upload('#myFile', '#img');" />
</div>
</div>
<script src="../../js/mui.js"></script>
<script src="../../js/mui.picker.min.js"></script>
<script src="../../js/host.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
/**拍照
* @param {Object} c
* @param {Object} d
*/
var upload = function(c, d) {
"use strict";
var $c = document.querySelector(c),
$d = document.querySelector(d),
file = $c.files[0],
picPath = $c.value,
reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function(e) {
$d.setAttribute("src", e.target.result);
};
localStorage.setItem('picPath', picPath);
};
</script>
</html>2. 參數解析：
1. accept 屬性（允許上傳兩種文件類型：gif 和 jpeg）
2. capture 捕獲到系統默認的設備，有三個參數值可設置
3. camera--照相機；camcorder--攝像機； microphone--錄音
4. js代碼做了封裝, 參數一表示 "選擇文件"的 id，參數二表示 "顯示圖片" 的 id，
5. 若是 ios 只能調用攝像頭，不能選擇打開相冊的話，就把這個【capture="camera"】去掉，直接加一個屬性 multiple
6. file 表示你選中的那個圖片，然后它里面有幾個屬性 name、size、type、slice等，也都非常實用，
7. FileReader作為文件API的重要成員用于讀取文件，根據W3C的定義，FileReader接口提供了讀取文件的方法和包含讀取結果的事件模型。
8. 調用 FileReader 的 readAsDataURL 接口，將啟動異步加載文件內容，通過給 reader 監聽一個 onload 事件，
9. 將數據加載完畢后，在onload事件處理中，通過 event 的 result 屬性即可獲得文件內容，然后扔進 img 的 src 即可 打開圖片并預覽。
3. 效果展示：
點擊拍照的圖標，如果在web端就是瀏覽文件上傳，手機端可進行拍照功能。
感謝你能夠認真閱讀完這篇文章，希望小編分享的“Html如何實現手機拍照和選擇上傳功能”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
