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