js實(shí)現(xiàn)手機(jī)拍照上傳功能
更新時(shí)間：2017年01月17日 08:30:15 作者：pleasecallme_522
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)手機(jī)拍照上傳功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
在前段時(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í)就是用到了瀏覽器對input type = file的解析，自動會獲取設(shè)備上的文件目錄和攝像頭。（注釋掉的內(nèi)容是當(dāng)在電腦上需要上傳文件并顯示在頁面上時(shí)，解決文件fakepath路徑問題的方法。具體在前面的博客中介紹過）
其實(shí)還有很多優(yōu)秀的庫可以解決這個問題，等到日后需要詳細(xì)了解的時(shí)候再總結(jié)。
最后其實(shí)就是實(shí)現(xiàn)了這樣的一個效果：
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關(guān)文章
JS實(shí)現(xiàn)把鼠標(biāo)放到鏈接上出現(xiàn)滾動文字的方法
這篇文章主要介紹了JS實(shí)現(xiàn)把鼠標(biāo)放到鏈接上出現(xiàn)滾動文字的方法,涉及JavaScript響應(yīng)鼠標(biāo)事件動態(tài)操作頁面元素的相關(guān)技巧,需要的朋友可以參考下2016-04-04
ionic實(shí)現(xiàn)可滑動的tab選項(xiàng)卡切換效果
這篇文章主要為大家詳細(xì)介紹了ionic實(shí)現(xiàn)可滑動的tab選項(xiàng)卡切換效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-08-08
JavaScript自定義錯誤與擴(kuò)展Error的示例詳解
在任何應(yīng)用程序中,正確處理錯誤都是至關(guān)重要的,JavaScript 提供了一個標(biāo)準(zhǔn)的 Error 對象來管理錯誤,但在實(shí)際開發(fā)中,通常需要針對特定場景定制錯誤處理,這時(shí),自定義錯誤和擴(kuò)展 Error 類就顯得尤為重要,本文給大家介紹了JavaScript自定義錯誤與擴(kuò)展Error的示例2025-01-01
createElement和onclick...2006-11-11
這篇文章主要介紹了詳解cocoscreater預(yù)制體prefab的作用和使用方法，對此感興趣的同學(xué)，可以回去試一試2021-04-04
JavaScript的exec()方法是在正則表達(dá)式對象上調(diào)用的方法,它用于在字符串中執(zhí)行正則表達(dá)式搜索,并返回匹配的結(jié)果,本文就給大家詳細(xì)的講解JavaScript中exec()方法,感興趣的同學(xué)跟著小編一起來看看吧2023-09-09
JavaScript中對循環(huán)語句的優(yōu)化技巧深入探討
這篇文章主要介紹了JavaScript中對循環(huán)語句的優(yōu)化技巧深入探討,本文翻譯自一個臺灣朋友的文章,需要的朋友可以參考下2014-06-06
這篇文章主要介紹了JavaScript獲取客戶端IP的方法(新方法)的相關(guān)資料,需要的朋友可以參考下2016-03-03
本篇文章主要介紹了淺談PDF.js使用心得，pdf.js 是一個技術(shù)原型主要用于在 HTML5 平臺上展示 PDF 文檔，無需任何本地技術(shù)支持。非常具有實(shí)用價(jià)值，需要的朋友可以參考下2018-06-06
js傳遞數(shù)組參數(shù)到后臺controller的方法
下面小編就為大家分享一篇js傳遞數(shù)組參數(shù)到后臺controller的方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03