您好,登錄后才能下訂單哦!
這篇文章主要介紹了Html如何實(shí)現(xiàn)手機(jī)拍照和選擇上傳功能,具有一定借鑒價(jià)值,感興趣的朋友可以參考下,希望大家閱讀完這篇文章之后大有收獲,下面讓小編帶著大家一起了解一下。
本文實(shí)例為大家分享了H5手機(jī)拍照和選擇上傳的,具體內(nèi)容如下
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. 參數(shù)解析:
1. accept 屬性(允許上傳兩種文件類(lèi)型:gif 和 jpeg)
2. capture 捕獲到系統(tǒng)默認(rèn)的設(shè)備,有三個(gè)參數(shù)值可設(shè)置
3. camera--照相機(jī);camcorder--攝像機(jī); microphone--錄音
4. js代碼做了封裝, 參數(shù)一表示 "選擇文件"的 id,參數(shù)二表示 "顯示圖片" 的 id,
5. 若是 ios 只能調(diào)用攝像頭,不能選擇打開(kāi)相冊(cè)的話(huà),就把這個(gè)【capture="camera"】去掉,直接加一個(gè)屬性 multiple
6. file 表示你選中的那個(gè)圖片,然后它里面有幾個(gè)屬性 name、size、type、slice等,也都非常實(shí)用,
7. FileReader作為文件API的重要成員用于讀取文件,根據(jù)W3C的定義,F(xiàn)ileReader接口提供了讀取文件的方法和包含讀取結(jié)果的事件模型。
8. 調(diào)用 FileReader 的 readAsDataURL 接口,將啟動(dòng)異步加載文件內(nèi)容,通過(guò)給 reader 監(jiān)聽(tīng)一個(gè) onload 事件,
9. 將數(shù)據(jù)加載完畢后,在onload事件處理中,通過(guò) event 的 result 屬性即可獲得文件內(nèi)容,然后扔進(jìn) img 的 src 即可 打開(kāi)圖片并預(yù)覽。
3. 效果展示:
點(diǎn)擊拍照的圖標(biāo),如果在web端就是瀏覽文件上傳,手機(jī)端可進(jìn)行拍照功能。
感謝你能夠認(rèn)真閱讀完這篇文章,希望小編分享的“Html如何實(shí)現(xiàn)手機(jī)拍照和選擇上傳功能”這篇文章對(duì)大家有幫助,同時(shí)也希望大家多多支持億速云,關(guān)注億速云行業(yè)資訊頻道,更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。