js實(shí)現(xiàn)手機(jī)拍照上傳功能
在前段時(shí)間的項(xiàng)目開(kāi)發(fā)中,用到了拍照上傳的地方,后來(lái)發(fā)現(xiàn)了最為簡(jiǎ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)在看來(lái) type = file的用處還真的是蠻廣泛的。這里其實(shí)就是用到了瀏覽器對(duì)input type = file的解析,自動(dòng)會(huì)獲取設(shè)備上的文件目錄和攝像頭。(注釋掉的內(nèi)容是當(dāng)在電腦上需要上傳文件并顯示在頁(yè)面上時(shí),解決文件fakepath路徑問(wèn)題的方法。具體在前面的博客中介紹過(guò))
其實(shí)還有很多優(yōu)秀的庫(kù)可以解決這個(gè)問(wèn)題,等到日后需要詳細(xì)了解的時(shí)候再總結(jié)。
最后其實(shí)就是實(shí)現(xiàn)了這樣的一個(gè)效果:


以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
用循環(huán)或if語(yǔ)句從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)方法,過(guò)程很簡(jiǎn)單具有一定的參考價(jià)值,適合初學(xué)者學(xué)習(xí)研究,感興趣的小伙伴們可以參考一下2015-11-11
js實(shí)現(xiàn)滾動(dòng)條滾動(dòng)到頁(yè)面底部繼續(xù)加載
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)滾動(dòng)條滾動(dòng)到頁(yè)面底部繼續(xù)加載,原理很簡(jiǎn)單,就是為window添加一個(gè)scroll事件,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2015-12-12
微信開(kāi)發(fā) JS-SDK 6.0.2 經(jīng)常遇到問(wèn)題總結(jié)
本篇文章主要介紹了"微信微信JS-SDK 6.0.2 遇到問(wèn)題 ",主要涉及到微信微信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)問(wèn)題分享下,需要的朋友可以參考下2023-06-06
js實(shí)現(xiàn)圖片放大并跟隨鼠標(biāo)移動(dòng)特效
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)圖片放大并跟隨鼠標(biāo)移動(dòng)特效,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-01-01

