js实现手机拍照上传功能

2024-11-27 10:14:36

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

<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路径问题的方法。具体在前面的博客中介绍过）
其实还有很多优秀的库可以解决这个问题，等到日后需要详细了解的时候再总结。

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

AngularJS中使用HTML5手机摄像头拍照

1. 项目背景公司开发一个网站,在做用户头像修改的时候领导提到增加一个由摄像头拍照实现修改头像的功能.因为我们网站是基于Html5进行开发,所以就直接采用H5来实现拍照.起初觉得这个功能很简单,但是做的时候才发现并不是那么简单的. 这是在AngularJs中成功实现调用摄像头拍照并截图上传的例图: 2. 如何调用摄像头 $scope.photoErr = false; $scope.photoBtnDiable = true; var mediaStream = null,track = nu
上传图片预览JS脚本 Input file图片预览的实现示例

在深圳做项目的时候,需要一个用户上传头像预览的功能!是在网上找了好多,都不太满意.要么是flash的,要么是Ajax上传后返回图片路径的,要么压根就是不能用的.幸运的是在这个项目以前有人写过一个图片预览的功能,还被我给翻了出来,在这里做个记录,方便自己以后用,也方便其他需要的朋友! 代码很简单,如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/
详解利用exif.js解决ios手机上传竖拍照片旋转90度问题

HTML5+canvas进行移动端手机照片上传时,发现iOS手机上传竖拍照片会逆时针旋转90度,横拍照片无此问题:Android手机没这个问题. 因此解决这个问题的思路是:获取到照片拍摄的方向角,对非横拍的ios照片进行角度旋转修正. 利用exif.js读取照片的拍摄信息,这里主要用到Orientation属性. Orientation属性说明如下: 下面就直接上代码了. 主要有html5页面和一个js,示例功能包含了图片压缩和旋转. 自己写的是uploadImage.js. html5测试页面
js 实现 input type="file" 文件上传示例代码

在开发中,文件上传必不可少,<input type="file" /> 是常用的上传标签,但是它长得又丑.浏览的字样不能换,我们一般会用让,<input type="file" />隐藏,点其他的标签(图片等)来时实现选择文件上传功能. 看代码: 复制代码代码如下: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <he
微信js-sdk预览图片接口及从拍照或手机相册中选图接口用法示例

本文实例讲述了微信js-sdk预览图片接口及从拍照或手机相册中选图接口用法.分享给大家供大家参考,具体如下: 目前中js-sdk 1.0版本中,预览图片提供了2个接口,接口的定义参考官方文档 1.预览网络图片http链接的 2.预览本地图片wenxin:// 链接的一.预览图片接口注: 1.预览图片接口目前只支持微信手机版 2.预览图片只支持http连接,对于weixin:// 无法预览 3.预览图片的地址需要进行加密处理,尤其路径中有中文的情况下,需要使用window.encodeURI(
PHP实现微信JS-SDK接口选择相册及拍照并上传的方法

本文实例讲述了PHP实现微信JS-SDK接口选择相册及拍照并上传的方法.分享给大家供大家参考,具体如下: 理解:微信上传接口是拍照,或者选择本地照片,上传到微信的服务器,获取到一个id,通过token与这个id获取到图片,保存到服务器即可. 效果图: 通过微信js接口,调用底层程序. 需要引入js文件,并进行配置. <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script> wx.c
一个简单的jQuery插件ajaxfileupload.js实现ajax上传文件例子

jQuery插件AjaxFileUpload可以实现ajax文件上传,该插件使用非常简单,首先了解一下正确使用AjaxFileUpload插件的方法,然后再了解一些常见的错误信息和解决方法. 使用说明需要使用jQuery库文件和AjaxFileUpload库文件使用实例一,包含文件部分复制代码代码如下: <script type="text/javascript" src="jquery.js"></script> <scr
js实现上传图片预览的方法

本文实例讲述了js实现上传图片预览的方法.分享给大家供大家参考.具体实现方法如下: 复制代码代码如下: function PreviewImage(imgFile) { var filextension=imgFile.value.substring(imgFile.value.lastIndexOf("."),imgFile.value.length); filextension=filextension.toLowerCase(); if ((filext
Servlet+Jsp实现图片或文件的上传功能具体思路及代码

现在不管是博客论坛还是企业办公,都离不开资源的共享.通过文件上传的方式,与大家同分享,从而达到大众间广泛的沟通和交流,我们既可以从中获得更多的知识和经验,也能通过他人的反馈达到自我改进和提升的目的. 下面我就为大家介绍 web项目中的这一上传功能,那么文件是如何从本地发送到服务器的呢?看我慢慢道来: 首先,我们创建一个新的web工程,在工程的WebRoot目录下新建一个upload文件夹,这样当我们将该工程部署到服务器上时,服务器便也生成个upload文件夹,用来存放上传的资源. 然后,在Web
js实现手机拍照上传功能

在前段时间的项目开发中,用到了拍照上传的地方,后来发现了最为简单的一种方法,现总结如下: <form id="form" method="post" action="http://192.168.1.131:8080/task/add" enctype="multipart/form-data"> <input id="input-file" type="file" a
Android 高仿微信朋友圈拍照上传功能

模仿微信朋友圈发布动态,输入文字支持文字多少高度自增,有一个最小输入框高度,输入文字有限制,不过这些都很easy! 1. PhotoPicker的使用这是一个支持选择多张图片,点击图片放大,图片之间左右滑动互相切换的库,同时支持图片删除的库,效果类似微信. (1) 添加PhotoPicker的架包 (2) 使用选择图片:安卓6.0以后需要在代码中添加读写sd卡和相机的权限当然清单文件中也需要添加的 PhotoPicker.builder() .setPhotoCount(maxPhoto)
Ajax 配合node js multer 实现文件上传功能

说明作为一个node 初学者,最近在做一个聊天软件,支持注册.登录.在线单人.多人聊天.表情发送.各种文件上传下载.增删好友.聊天记录保存.通知声开关.背景图片切换.游戏等功能,所以用到了multer 模块,经过各种查文档,做demo例子,终于成功实现单个文件上传功能,支持大部分文件格式上传,同时显示到网页上效果是不是有种微信即视感,没错,就是根据网页版微信来做的, 要实现整体效果的话,要配合css和html来做,前端初学者,第一次发博客,实在捉急,近期,将会将代码放到github上去,感
Android4.4 WebAPI实现拍照上传功能

网上有很多关于拍照上传的实现方法,如果用新版本android去运行有可能会发现根本实现不了.主要原因是android从4.4版本开始通过intent.ACTION_GET_CONTENT打开选择器后,getData()返回的URI没有包含真实的文件路径,而是像这样"content://com.android.providers.media.documents/document/image:1234",以至于用传统的方式找不到图片的路径.最简单的解决办法是用intent.ACTION_P
通过js实现压缩图片上传功能

大概的流程就是点击file选择图片 js将图片解读出base64编码,然后通过js将base64编码转为压缩后的base64 然后通过ajax或者form把压缩后的base64编码提交到服务器(php) 然后php将base64写入文件 html  <img src="/Uploads/verifyinfo/cardz.png" style="width: 100%;height: 100%;&
vue实现pc端拍照上传功能

本文实例为大家分享了vue实现pc端拍照上传功能的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF8"> </head> <body> <div id="contentHolder"> <video id="video" width="320" heigh
php视频拍照上传头像功能实现代码分享

如果要在php中实现视频拍照我们需要借助于flash插件了,由flash拍出的确照片我们再通过php的$GLOBALS ['HTTP_RAW_POST_DATA']接受数据,然后保存成图片就可以了,下面我来介绍一下. 使用的是$GLOBALS ['HTTP_RAW_POST_DATA'],这个系统函数跟post很相似,但是$GLOBALS ['HTTP_RAW_POST_DATA']支持的数据格式更丰富些. 设计流程: $GLOBALS ['HTTP_RAW_POST_DATA']传递照片数据流
使用jQuery.form.js/springmvc框架实现文件上传功能

使用的技术有jquery.form.js框架, 以及springmvc框架.主要实现异步文件上传的同时封装对象,以及一些注意事项. 功能本身是很简单的,但是涉及到一些传递参数类型的问题.例如:jquery的ajax方法与jquery.form.js中的ajaxSubmit方法的参数,具体细节将在下一篇博客中分享. 重点: html表格三要素: action="fileUpload/fileUpload" method="post" enctype="mul
node.js（express）中使用Jcrop进行图片剪切上传功能

需求说明简单来说就是要实现用户上传头像,并且要保存用户裁切后的部分作为用户头像. 第一步,选择图片: 第二步,在弹窗页面中展现并进行裁切: 第三步,点击"保存",上传服务器. 实现过程说来有点坎坷,相当于做了2遍,走了弯路. 第1遍是用户一选择图片,就进行了上传,然后返回一个地址,所以在弹层上展现的图片已经是服务器上的图片了,然后进行裁切,再保存. 第2遍找到的一个方法,是在第1遍做到裁切处理时候想到的,即弹层展现的是用户机器上选择的图片,不用先上传,但是用image/base64
JS实现多张图片预览同步上传功能

废话不多说了,直接给大家贴代码了,具体代码如下所示: /** * Created by liujing on 2017/5/10. */ $(document).ready(function($) { function changef(which,bulk,name_n){ var bulka = bulk; var thisid = which.attr("id"); var f = which.prop ('files')[0]; var filename = f.name; va

js实现手机拍照上传功能

相关推荐

随机推荐