js實(shí)現(xiàn)手機(jī)拍照上傳功能
在前段時(shí)間的項(xiàng)目開發(fā)中，用到了拍照上傳的地方，后來發(fā)現(xiàn)了最為簡單的一種方法,現(xiàn)總結(jié)如下：
<form id="form" method="post" action="http://192.168.1.131:8080/task/add" enctype="multipart/form-data"> <input id="input-file" type="file" accept="image/jpeg" capture="camera"/> </form>
上傳部分的JS代碼：
$("input[type='file']").on('change', function () {
$('#form').submit();
//var oFReader = new FileReader();
//var file = document.getElementById('input-file').files[0];
//oFReader.readAsDataURL(file);
//oFReader.onloadend = function(oFRevent){
// var src = oFRevent.target.result;
// $('.content').attr('src',src);
// alert(src);
//}
});
現(xiàn)在看來 type = file的用處還真的是蠻廣泛的。這里其實(shí)就是用到了瀏覽器對(duì)input type = file的解析，自動(dòng)會(huì)獲取設(shè)備上的文件目錄和攝像頭。（注釋掉的內(nèi)容是當(dāng)在電腦上需要上傳文件并顯示在頁面上時(shí)，解決文件fakepath路徑問題的方法。具體在前面的博客中介紹過）
其實(shí)還有很多優(yōu)秀的庫可以解決這個(gè)問題，等到日后需要詳細(xì)了解的時(shí)候再總結(jié)。
最后其實(shí)就是實(shí)現(xiàn)了這樣的一個(gè)效果：
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
用循環(huán)或if語句從json中取數(shù)據(jù)示例
倘若想將id和pid數(shù)據(jù)依次取出，就只能用循環(huán)，若想有選擇性的輸出時(shí)，需要添加if條件2014-08-08
(currentStyle)javascript為何有時(shí)用style得不到已設(shè)定的CSS的屬性
(currentStyle)javascript為何有時(shí)用style得不到已設(shè)定的CSS的屬性...2007-08-08
微信小程序?qū)崿F(xiàn)點(diǎn)擊導(dǎo)航標(biāo)簽滾動(dòng)定位到對(duì)應(yīng)位置
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)點(diǎn)擊導(dǎo)航標(biāo)簽滾動(dòng)定位到對(duì)應(yīng)位置，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-11-11
javascript實(shí)現(xiàn)密碼驗(yàn)證
這篇文章主要介紹了javascript密碼驗(yàn)證的實(shí)現(xiàn)方法，過程很簡單具有一定的參考價(jià)值，適合初學(xué)者學(xué)習(xí)研究，感興趣的小伙伴們可以參考一下2015-11-11
js實(shí)現(xiàn)滾動(dòng)條滾動(dòng)到頁面底部繼續(xù)加載
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)滾動(dòng)條滾動(dòng)到頁面底部繼續(xù)加載，原理很簡單，就是為window添加一個(gè)scroll事件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2015-12-12
微信開發(fā) JS-SDK 6.0.2 經(jīng)常遇到問題總結(jié)
本篇文章主要介紹了"微信微信JS-SDK 6.0.2 遇到問題 "，主要涉及到微信微信JS-SDK 6.0.2 填坑筆記 方面的內(nèi)容，對(duì)于微信微信JS-SDK 6.0.2 填坑筆記 感興趣的同學(xué)可以參考一下。2016-12-12
js Cannot set properties of null(se
今天增加功能的時(shí)候，提示Uncaught TypeError: Cannot set properties of null (setting onclick)問題分享下,需要的朋友可以參考下2023-06-06
js實(shí)現(xiàn)圖片放大并跟隨鼠標(biāo)移動(dòng)特效
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)圖片放大并跟隨鼠標(biāo)移動(dòng)特效，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-01-01
本文主要介紹了JS 異步遍歷的實(shí)現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
這篇文章主要為大家詳細(xì)介紹了js原生瀑布流插件制作，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-10-10