脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js手机拍照上传

js实现手机拍照上传功能

 更新时间：2017年01月17日 08:30:15   作者：pleasecallme_522  
这篇文章主要为大家详细介绍了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路径问题的方法。具体在前面的博客中介绍过）
其实还有很多优秀的库可以解决这个问题，等到日后需要详细了解的时候再总结。

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

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

您可能感兴趣的文章:

相关文章

  • 用循环或if语句从json中取数据示例

    用循环或if语句从json中取数据示例

    倘若想将id和pid数据依次取出，就只能用循环，若想有选择性的输出时，需要添加if条件
    2014-08-08
  • (currentStyle)javascript为何有时用style得不到已设定的CSS的属性

    (currentStyle)javascript为何有时用style得不到已设定的CSS的属性

    (currentStyle)javascript为何有时用style得不到已设定的CSS的属性...
    2007-08-08
  • 微信小程序实现点击导航标签滚动定位到对应位置

    微信小程序实现点击导航标签滚动定位到对应位置

    这篇文章主要为大家详细介绍了微信小程序实现点击导航标签滚动定位到对应位置，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-11-11
  • javascript实现密码验证

    javascript实现密码验证

    这篇文章主要介绍了javascript密码验证的实现方法，过程很简单具有一定的参考价值，适合初学者学习研究，感兴趣的小伙伴们可以参考一下
    2015-11-11
  • js实现滚动条滚动到页面底部继续加载

    js实现滚动条滚动到页面底部继续加载

    这篇文章主要为大家详细介绍了js实现滚动条滚动到页面底部继续加载，原理很简单，就是为window添加一个scroll事件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2015-12-12
  • 微信开发 JS-SDK 6.0.2 经常遇到问题总结

    微信开发 JS-SDK 6.0.2 经常遇到问题总结

    本篇文章主要介绍了"微信微信JS-SDK 6.0.2 遇到问题 "，主要涉及到微信微信JS-SDK 6.0.2 填坑笔记 方面的内容，对于微信微信JS-SDK 6.0.2 填坑笔记 感兴趣的同学可以参考一下。
    2016-12-12
  • js Cannot set properties of null(setting ‘onclick‘)问题分析

    js Cannot set properties of null(se

    今天增加功能的时候，提示Uncaught TypeError: Cannot set properties of null (setting onclick)问题分享下,需要的朋友可以参考下
    2023-06-06
  • js实现图片放大并跟随鼠标移动特效

    js实现图片放大并跟随鼠标移动特效

    这篇文章主要为大家详细介绍了js实现图片放大并跟随鼠标移动特效，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2019-01-01
  • JS 异步遍历的实现方法

    JS 异步遍历的实现方法

    本文主要介绍了JS 异步遍历的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2023-04-04
  • js原生瀑布流插件制作

    js原生瀑布流插件制作

    这篇文章主要为大家详细介绍了js原生瀑布流插件制作，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-10-10

最新评论