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. 深入讲解HashMap原理

    1.    HashMap概述: HashMap是基于哈希表的Map接口的非同步实现.此实现提供所有可选的映射操作,并允许使用null值和null键.此类不保证映射的顺序,特别是它不保证该顺序恒久不变 ...

  2. Jdk8的学习之lambda

    在JDK8中,引入了Lambda(读:了母达)表达式的概念,这是我最喜欢的特性,很多东西都变得简单了,一行代码可以搞定. 比如说排序 /** * 这是一个JDK8的lambda的排序应用 */ pub ...

  3. YiShop_最全微信营销涨粉技巧

    在我们开始推广企业订阅号之前,我们必须思考微信营销策略,客户通过微信可以获得什么?企业通过微信可以得到什么?微分销专家建议企业微信定位为互动.服务工具,因为获取一个粉丝很难,可是失去一个粉丝,却是一件 ...

  4. javascript设计模式——中介者模式

    前面的话 程序由大大小小的单一对象组成,所有这些对象都按照某种关系和规则来通信.当程序的规模增大,对象会越来越多,它们之间的关系也越来越复杂,难免会形成网状的交叉引用.当改变或删除其中一个对象的时候, ...

  5. python的简介及入门

    前言 为何使用Python Python 是一种效率极高的语言.与其他众多的语言相比,实现相同功能,使用Python编写的程序包含的代码更少.Python的语法简单,易上手,使用Python编写的代码 ...

  6. C语言写单链表的创建、释放、追加(即总是在最后的位置增加节点)

    昨天周末给学妹讲了一些指针的知识,本来我对指针就是似懂非懂的状态,经过昨天一讲,我对指针的学习就更深刻了 果然给别人讲课也是学习的一个方法.加上最近复习数据结构,发现我的博客里没有链表的博文,所以趁这 ...

  7. JavaScript实现AOP(面向切面编程)

    什么是AOP? AOP(面向切面编程)的主要作用是把一些跟核心业务逻辑模块无关的功能抽离出来,这些跟业务逻辑无关的功能通常包括日志统计.安全控制.异常处理等.把这些功能抽离出来之后, 再通过" ...

  8. TensorBoard 使用和问题解决

    TensorBoard 使用和问题解决 一.启动TensorBoard 1) python tensorflow/tensorboard/tensorboard.py --logdir=path/to ...

  9. LDA主题模型学习笔记5:C源代码理解

    1.说明 本文对LDA原始论文的作者所提供的C代码中LDA的主要逻辑部分做凝视,原代码可在这里下载到:https://github.com/Blei-Lab/lda-c 这份代码实现论文<Lat ...

  10. 基于lucene.net 和ICTCLAS2014的站内搜索的实现1

    Lucene.net是一个搜索引擎的框架,它自身并不能实现搜索.须要我们自己在当中实现索引的建立,索引的查找.全部这些都是依据它自身提供的API来实现.Lucene.net本身是基于java的,可是经 ...