广告
返回顶部
首页 > 资讯 > 前端开发 > VUE >js如何实现手机拍照上传功能
  • 419
分享到

js如何实现手机拍照上传功能

js 2022-10-19 02:10:04 419人浏览 薄情痞子
摘要

这篇文章将为大家详细讲解有关js如何实现手机拍照上传功能,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。在前段时间的项目开发中,用到了拍照上传的地方,后来发现了最为简单的一

这篇文章将为大家详细讲解有关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" 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如何实现手机拍照上传功能

关于“js如何实现手机拍照上传功能”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。

--结束END--

本文标题: js如何实现手机拍照上传功能

本文链接: https://www.lsjlt.com/news/65903.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • js如何实现手机拍照上传功能
    这篇文章将为大家详细讲解有关js如何实现手机拍照上传功能,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。在前段时间的项目开发中,用到了拍照上传的地方,后来发现了最为简单的一...
    99+
    2022-10-19
    js
  • Android实现手机拍照功能
    本文实例为大家讲解如何轻松实现Android手机拍照功能,分享给大家供大家参考。具体如下: 一、布局文件main.xml <?xml version="1.0...
    99+
    2022-06-06
    手机 Android
  • Android4.4 WebAPI实现拍照上传功能
    网上有很多关于拍照上传的实现方法,如果用新版本android去运行有可能会发现根本实现不了。主要原因是android从4.4版本开始通过intent.ACTION_GET_CO...
    99+
    2022-06-06
    webapi Android
  • vue实现pc端拍照上传功能
    本文实例为大家分享了vue实现pc端拍照上传功能的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html>   <hea...
    99+
    2022-11-12
    vue pc端拍照上传 vue拍照上传 vue上传功能
  • 微信JS-SDK如何实现选取手机照片上传功能
    这篇文章给大家分享的是有关微信JS-SDK如何实现选取手机照片上传功能的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。1.配置微信JS-SDK相关文件1)、JSSDk使用最新的1....
    99+
    2022-10-19
    微信开发 js sdk
  • HTML5如何实现微信拍摄上传照片功能
    这篇文章主要介绍HTML5如何实现微信拍摄上传照片功能,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!前端代码$(':file').on('change'...
    99+
    2022-10-19
    html5
  • android实现手机App实现拍照功能示例
    实现手机App实现拍照功能结果如下 第一步: activity_takephoto.xml布局用SurfaceView <?xml version=...
    99+
    2022-06-06
    手机app 示例 app Android
  • HTML5中如何使用Plus实现手机APP拍照或相册选择图片上传功能
    这篇文章给大家分享的是有关HTML5中如何使用Plus实现手机APP拍照或相册选择图片上传功能的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。利用HTML Plus的Camera、GalleryIO、Storage...
    99+
    2023-06-09
  • html5如何实现拍照功能
    这篇文章将为大家详细讲解有关html5如何实现拍照功能,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。 1、 视频流 HTML5 The Media Capture A...
    99+
    2022-10-19
    html5
  • 世界上最好的拍照手机,华为拍照的四种功能揭晓,拍出你想拍的
    华为手机大家肯定都不陌生,但是大家是否知道华为手机曾被国际权威机构DXO评为世界上最好的拍照手机呢?正所谓"一机在手,拍照不愁"。那么目前正在使用华为手机小伙伴,你当初入手华为手机是不是也因为华为手机的拍照功能呢?那么你...
    99+
    2023-06-03
  • Android中怎么实现微信朋友圈拍照上传功能
    Android中怎么实现微信朋友圈拍照上传功能,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。1. PhotoPicker的使用这是一个支持选择多张图片,点击图片放大,图片之间左...
    99+
    2023-05-30
  • 如何使用HTML5实现拍照功能
    这篇文章主要介绍“如何使用HTML5实现拍照功能”,在日常操作中,相信很多人在如何使用HTML5实现拍照功能问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”如何使用HTML5实...
    99+
    2022-10-19
    html5
  • 如何用Java+OpenCV实现拍照功能
    本篇内容主要讲解“如何用Java+OpenCV实现拍照功能”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“如何用Java+OpenCV实现拍照功能”吧!依赖jar包:只有一个OpenCv的jar包...
    99+
    2023-06-26
  • Android仿微信发表说说实现拍照、多图上传功能
    本文实例为大家分享了Android仿微信发表说说、心情功能,供大家参考,具体内容如下 既能实现拍照,选图库,多图案上传的案例,目前好多App都有类似微信朋友圈的功能,能过发表说...
    99+
    2022-06-06
    Android
  • Android 偷拍功能实现(手机关闭依然拍照)详解及实例代码
     Android 偷拍功能/手机关闭能拍照 效果如下: 其实偷拍与偷录实现方式是一样的,都是使用到的WindowManager来绘制桌面小控件的原理。那我就不多...
    99+
    2022-06-06
    关闭 手机 Android
  • 怎么用HTML5实现调用手机摄像头拍照功能
    本篇内容介绍了“怎么用HTML5实现调用手机摄像头拍照功能”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成! ...
    99+
    2022-10-19
    html5
  • Vue.js 2.0如何实现移动端拍照压缩图片上传预览功能
    小编给大家分享一下Vue.js 2.0如何实现移动端拍照压缩图片上传预览功能,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!在学习...
    99+
    2022-10-19
    vue.js
  • Vue.js 2.0如何实现移动端拍照压缩图片预览及上传功能
    这篇文章主要介绍Vue.js 2.0如何实现移动端拍照压缩图片预览及上传功能,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!首先我来讲我实现这个拍照预览压缩上传的思路,准确的说应该是拍...
    99+
    2022-10-19
    vue
  • HTML5 和小程序如何实现拍照图片旋转、压缩和上传功能
    这篇文章给大家分享的是有关HTML5 和小程序如何实现拍照图片旋转、压缩和上传功能的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。最近接到一个“发表评论”的需求:用户输入评论并且可以拍照或从相册选择图片上传,即支持...
    99+
    2023-06-09
  • 如何实现js上传文件功能
    这篇文章给大家分享的是有关如何实现js上传文件功能的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。具体内容如下一、用input完成上传,效果图如   ...
    99+
    2022-10-19
    js
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作