js实现手机拍照上传功能


Posted in Javascript onJanuary 17, 2017

在前段时间的项目开发中,用到了拍照上传的地方,后来发现了最为简单的一种方法,现总结如下:

<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);
 //}
});

现在看来 type = file的用处还真的是蛮广泛的。这里其实就是用到了浏览器对input type = file的解析,自动会获取设备上的文件目录和摄像头。(注释掉的内容是当在电脑上需要上传文件并显示在页面上时,解决文件fakepath路径问题的方法。具体在前面的博客中介绍过)
其实还有很多优秀的库可以解决这个问题,等到日后需要详细了解的时候再总结。

最后其实就是实现了这样的一个效果:

js实现手机拍照上传功能

js实现手机拍照上传功能

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript语法着色引擎(demo及打包文件下载)
Jun 13 Javascript
javascript sudoku 数独智力游戏生成代码
Mar 27 Javascript
什么是json和jsonp,jQuery json实例详详细说明
Dec 11 Javascript
js生成的验证码的实现与技术分析
Sep 17 Javascript
JavaScript中setTimeout和setInterval函数的传参及调用
Mar 11 Javascript
CascadeView级联组件实现思路详解(分离思想和单链表)
Apr 12 Javascript
如何提高Dom访问速度
Jan 05 Javascript
Bootstrap模态框插件使用详解
May 11 Javascript
关于javascript获取内联样式与嵌入式样式的实例
Jun 01 Javascript
vue脚手架搭建项目的兼容性配置详解
Jul 17 Javascript
微信小程序左滑删除实现代码实例
Sep 16 Javascript
解决node终端下运行js文件不支持ES6语法
Apr 04 Javascript
angular实现form验证实例代码
Jan 17 #Javascript
基于jQuery实现数字滚动效果
Jan 16 #Javascript
5种JavaScript脚本加载的方式
Jan 16 #Javascript
WebPack基础知识详解
Jan 16 #Javascript
jquery Ajax 全局调用封装实例详解
Jan 16 #Javascript
javascript循环链表之约瑟夫环的实现方法
Jan 16 #Javascript
函数四种调用模式以及其中的this指向
Jan 16 #Javascript
You might like
PHP中创建空文件的代码[file_put_contents vs touch]
2012/01/20 PHP
有关于PHP中常见数据类型的汇总分享
2014/01/06 PHP
PHP直接修改表内容DataGrid功能实现代码
2015/09/24 PHP
php实现购物车功能(上)
2020/07/23 PHP
php+mysql实现的二级联动菜单效果详解
2016/05/10 PHP
浅谈htmlentities 、htmlspecialchars、addslashes的使用方法
2016/12/09 PHP
PHP操作路由器实现方法示例
2019/04/27 PHP
根据出生日期自动取得星座的js代码
2010/07/20 Javascript
js实现翻页后保持checkbox选中状态的实现方法
2012/11/03 Javascript
JavaScript前补零操作实例
2015/03/11 Javascript
对JavaScript的全文搜索实现相关度评分的功能的方法
2015/06/24 Javascript
JS实现漂亮的窗口拖拽效果(可改变大小、最大化、最小化、关闭)
2015/10/10 Javascript
JavaScript实现给定时间相加天数的方法
2016/01/25 Javascript
基于BootStrap Metronic开发框架经验小结【六】对话框及提示框的处理和优化
2016/05/12 Javascript
原生JS实现图片无缝滚动方法(附带封装的运动框架)
2017/10/01 Javascript
vue2.0+vue-dplayer实现hls播放的示例
2018/03/02 Javascript
bootstrap模态框关闭后清除模态框的数据方法
2018/08/10 Javascript
详解Vue基于vue-quill-editor富文本编辑器使用心得
2019/01/03 Javascript
浅谈Node 异步IO和事件循环
2019/05/05 Javascript
js实现的订阅发布者模式简单示例
2020/03/14 Javascript
[01:42:49]DOTA2-DPC中国联赛 正赛 iG vs PSG.LGD BO3 第一场 2月26日
2021/03/11 DOTA
pycharm 使用心得(五)断点调试
2014/06/06 Python
Python生成密码库功能示例
2017/05/23 Python
python中hashlib模块用法示例
2017/10/30 Python
简单谈谈python中的lambda表达式
2018/01/19 Python
Django多层嵌套ManyToMany字段ORM操作详解
2020/05/19 Python
如何实现一个python函数装饰器(Decorator)
2020/10/12 Python
突袭HTML5之Javascript API扩展5—其他扩展(应用缓存/服务端消息/桌面通知)
2013/01/31 HTML / CSS
Burt’s Bees英国官网:世界领先的天然个人护理品牌
2020/08/17 全球购物
业务部经理岗位职责
2014/01/04 职场文书
人民教师求职自荐信
2014/03/12 职场文书
母亲节演讲稿
2014/05/27 职场文书
2015年小学图书室工作总结
2015/05/18 职场文书
人民的好儿女观后感
2015/06/18 职场文书
Angular性能优化之第三方组件和懒加载技术
2021/05/10 Javascript
Java基于Dijkstra算法实现校园导游程序
2022/03/17 Java/Android