html代码:

  <img id="pic" src="img/pic.png"/>

  </span><input id="file" type="file" accept="image/*" capture="camera"/>

注意:IOS和Android有兼容性问题,IOS只能拍照,不能从相册选择

  解决:

 $(function () {
//解决上传图片时capture="camera"在安卓与IOS的兼容性问题(在IOS只能拍照,不能选相册)
var ua = navigator.userAgent.toLowerCase();//获取浏览器的userAgent,并转化为小写——注:userAgent是用户可以修改的
var isIos = (ua.indexOf('iphone') != -1) || (ua.indexOf('ipad') != -1);//判断是否是苹果手机,是则是true
if (isIos) {
$("input:file").removeAttr("capture");
};
})

js代码:

  //选择图片后自动填充

  //获取对象input file 的图片地址,放进img
  $("#file").change(function () {//input的id
  var objUrl = getObjectURL(this.files[0]);//调用函数调取图片地址
  obUrl = objUrl;
  console.log("objUrl = " + objUrl);
  if (objUrl) {
  $("#pic").attr("src", objUrl).show();//选择img的ID,给src赋值
  }
  });

  //获取input file的文件地址
  function getObjectURL(file) {
  var url = null;
  if (window.createObjectURL != undefined) {//basic
  url = window.createObjectURL(file);
  } else if (window.URL != undefined) {//mozilla(firefox)兼容火狐
  url = window.URL.createObjectURL(file);
  } else if (window.webkitURL != undefined) {//webkit or chrome
  url = window.webkitURL.createObjectURL(file);
  }
  return url;
  }

input 上传图片显示预览、调用摄像头,ios和Android的兼容性解决的更多相关文章

  1. input上传图片 显示预览信息

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...

  2. input上传图片并预览

    首先说一下input 大家都知道上传文件,图片是通过input 的file进行上传的. 1. 首先是样式 大家都知道input在HTML的代码为 <input type="file&q ...

  3. vue 利用原声input上传图片并预览并删除

    <template> <div class="com-upload-img"> <div class="img_group"> ...

  4. 关于asp.net mvc中 weiui gallery中IOS 下不显示预览图片问题的解决方式

    IOS 下面不显示预览. 结果去掉了红框中的缓存部分 就可以显示了 备忘,也帮助一下需要的朋友 @*<meta http-equiv="pragma" content=&qu ...

  5. vue <input type="file">上传图片、预览、删除

    使用原生<input type="file">上传图片.预览.删除:multiple实现可上传多张 参数名 类型 说明 fileTypes Array 文件类型, 默认 ...

  6. js实现上传图片本地预览功能以及限制图片的文件大小和尺寸大小

    方法一: js: /**     * 上传图片本地预览方法     * @param {Object} fileObj 上传文件file的id元素  fresh-fileToUpload      * ...

  7. js上传图片及预览功能

    详细内容请点击 参考了网上一些人代码写了一个上传图片及时预览的功能 <img id="imgTag" style="height: 100px;" alt ...

  8. jquery解决file上传图片+图片预览

    js解决file上传图片+图片预览 demo案例中代码为js原生控制,可以根据项目的需求修改为jquery操作 <!DOCTYPE html><html lang="en& ...

  9. Windows 10下Markdown不能显示预览

    Windows 10下Markdown不能显示预览 结局办法 下载awesomium的SDK,安装后重启Markdown即可 实测最新版本的SDK不行,建议安装1.6.6 下载地址:http://ww ...

随机推荐

  1. 外观模式(Facade)

    外观模式(Facade) 外观模式是为了解决类与类之家的依赖关系的,像spring一样,可以将类和类之间的关系配置到配置文件中,而外观模式就是将他们的关系放在一个Facade类中,降低了类类之间的耦合 ...

  2. 用python 抓取B站视频评论,制作词云

    python 作为爬虫利器,与其有很多强大的第三方库是分不开的,今天说的爬取B站的视频评论,其实重点在分析得到的评论化作嵌套的字典,在其中取出想要的内容.层层嵌套,眼花缭乱,分析时应细致!步骤分为以下 ...

  3. SQL Server学习之路(六):“增删改查”之“查”

    0.目录 1.前言 2.最基本的SQL查询语句 3.select...from... 3.1 "*"与"Top num *" 3.2 查询指定列 3.3 Isn ...

  4. IIS网站本机可以访问但局域网其他机器无法访问 解决方法

    在IIS部署网站的时候,发现只有本机可以访问,通过localhost和IP地址都可以,但是当局域网其他机器访问我的网站的时候,无响应. 我的是WIN10的系统 解决方法:   网站所对应的端口必须对外 ...

  5. sqoop实现关系型数据库与hadoop之间的数据传递-import篇

    由于业务数据量日益增长,计算量非常庞大,传统的数仓已经无法满足计算需求了,所以现在基本上都是将数据放到hadoop平台去实现逻辑计算,那么就涉及到如何将oracle数仓的数据迁移到hadoop平台的问 ...

  6. 人工智能二:TensorFlow环境搭建

    一.Windows下安装虚拟机VMware Workstation,在虚拟机中安装Ubuntu(要善用搜索引擎,解决各类简单问题) VMware Workstation下载地址:http://www. ...

  7. CoordinatorLayout与滚动的处理

    本博文专门解说和CoordinatorLayout相关的知识点,这也是Design Support Library中最重要与最难的部分. 概览 CoordinatorLayout实现了多种Materi ...

  8. Vue深度学习(3)

    基础 Vue.js允许自定义指令,实质上是让你教 Vue一些新技巧:怎样将数据的变化映射到 DOM 的行为.可以使用 Vue.directive(id, definition) 的方法传入指令 id  ...

  9. 通过第三方工具体验Microsoft Graph

    作者:陈希章 发表于 2017年3月22日 上一篇文章我介绍了如何利用官方提供的Graph 浏览器快速体验Microsoft Graph强大功能,这是极好的起点.官方的Graph浏览器力图用最简单的方 ...

  10. Pseudo-devices On GNU/Linux

    先分享一则有意思Q&A,来自The FreeBSD Funnies 17.4 . Where does data written to* /dev/null* go? ​ It goes in ...