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


以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
用循環(huán)或if語句從json中取數(shù)據(jù)示例
倘若想將id和pid數(shù)據(jù)依次取出,就只能用循環(huán),若想有選擇性的輸出時,需要添加if條件2014-08-08
(currentStyle)javascript為何有時用style得不到已設定的CSS的屬性
(currentStyle)javascript為何有時用style得不到已設定的CSS的屬性...2007-08-08
微信小程序?qū)崿F(xiàn)點擊導航標簽滾動定位到對應位置
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)點擊導航標簽滾動定位到對應位置,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2020-11-11
微信開發(fā) JS-SDK 6.0.2 經(jīng)常遇到問題總結(jié)
本篇文章主要介紹了"微信微信JS-SDK 6.0.2 遇到問題 ",主要涉及到微信微信JS-SDK 6.0.2 填坑筆記 方面的內(nèi)容,對于微信微信JS-SDK 6.0.2 填坑筆記 感興趣的同學可以參考一下。2016-12-12
js Cannot set properties of null(se
今天增加功能的時候,提示Uncaught TypeError: Cannot set properties of null (setting onclick)問題分享下,需要的朋友可以參考下2023-06-06

