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 相关文章推荐
jQuery EasyUI API 中文文档 - Calendar日历使用
Oct 19 Javascript
JavaScript取得鼠标绝对位置程序代码介绍
Sep 16 Javascript
js控制web打印(局部打印)方法整理
May 29 Javascript
js使用for循环查询数组中是否存在某个值
Aug 12 Javascript
JavaScript给按钮绑定点击事件(onclick)的方法
Apr 07 Javascript
jQuery插件slicebox实现3D动画图片轮播切换特效
Apr 12 Javascript
第一篇初识bootstrap
Jun 21 Javascript
详解如何在React组件“外”使用父组件的Props
Jan 12 Javascript
webpack4 升级迁移的实现
Sep 12 Javascript
jQuery控制input只能输入数字和两位小数的方法
May 16 jQuery
Vue实现搜索结果高亮显示关键字
May 28 Javascript
vue中实现高德定位功能
Dec 03 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
解析posix与perl标准的正则表达式区别
2013/06/17 PHP
详解PHP处理字符串类似indexof的方法函数
2017/06/11 PHP
PHP-FPM和Nginx的通信机制详解
2019/02/01 PHP
PHP使用PDO创建MySQL数据库、表及插入多条数据操作示例
2019/05/30 PHP
php 多进程编程父进程的阻塞与非阻塞实例分析
2020/02/22 PHP
javascript两种function的定义介绍及区别说明
2013/05/02 Javascript
捕获浏览器关闭、刷新事件不同情况下的处理方法
2013/06/02 Javascript
NodeJS制作爬虫全过程(续)
2014/12/22 NodeJs
jQuery实现仿美橙互联两级导航菜单效果完整实例
2015/09/17 Javascript
浅谈js图片前端预览之filereader和window.URL.createObjectURL
2016/06/30 Javascript
从零学习node.js之模块规范(一)
2017/02/21 Javascript
JavaScript之创意时钟项目(实例讲解)
2017/10/23 Javascript
Vuejs实现购物车功能
2017/11/05 Javascript
Vue手把手教你撸一个 beforeEnter 钩子函数
2018/04/24 Javascript
nodeJs爬虫的技术点总结
2018/05/13 NodeJs
微信小程序按钮点击跳转页面详解
2019/05/06 Javascript
vue配置文件实现代理v2版本的方法
2019/06/21 Javascript
在vue项目中 实现定义全局变量 全局函数操作
2020/10/26 Javascript
Python contextlib模块使用示例
2015/02/18 Python
使用Python生成url短链接的方法
2015/05/04 Python
Python闭包的两个注意事项(推荐)
2017/03/20 Python
Python解决N阶台阶走法问题的方法分析
2017/12/28 Python
浅谈pandas中DataFrame关于显示值省略的解决方法
2018/04/08 Python
浅谈Pycharm调用同级目录下的py脚本bug
2018/12/03 Python
Python面向对象之类的定义与继承用法示例
2019/01/14 Python
解决Pycharm界面的子窗口不见了的问题
2019/01/17 Python
OpenCV+face++实现实时人脸识别解锁功能
2019/08/28 Python
selenium+python实现自动登陆QQ邮箱并发送邮件功能
2019/12/13 Python
Python hashlib加密模块常用方法解析
2019/12/18 Python
python编写扎金花小程序的实例代码
2021/02/23 Python
python 对xml解析的示例
2021/02/27 Python
高级工程师英文求职信
2014/03/19 职场文书
教师求职自荐信范文
2015/03/04 职场文书
全国法制宣传日活动总结
2015/05/05 职场文书
postgresql使用filter进行多维度聚合的解决方法
2021/07/16 PostgreSQL
将MySQL的表数据全量导入clichhouse库中
2022/03/21 MySQL