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. javaWeb开发中关于eclipse等ide重新部署或重启项目等原因造成上传文件丢失问题解决方案

    在开发项目时,有时候需要用到上传功能,比如头像上传等,其文件会保存到服务器中.但是我发现在用eclipse做项目的过程中,每次重新部署项目,原来上传的文件就会丢失. 其原因是因为每次项目修改后,ecl ...

  2. SQL Server 2017 安装过程中的一点说明(有点意思)

    会提到:“安装程序无法与下载服务器联系.请提供 Microsoft 机器学习服务器安装文件的位置,然后单击“下一步”.可从以下位置下载安装文件” 的解决方案 安装过程和2016大体一致,机器学习这款更 ...

  3. 选择客栈noip2011

    哈,没想到吧.今天居然有两篇(算什么,厕所读物吗 选择客栈 本题的更优解请跳转zt 这题11年,刚改2day. 对于30% 的数据,有 n ≤100: 对于50% 的数据,有 n ≤1,000: 对于 ...

  4. Js 作用域与作用域链与执行上下文不得不说的故事 ⁄(⁄ ⁄•⁄ω⁄•⁄ ⁄)⁄

    最近在研究Js,发现自己对作用域,作用域链,活动对象这几个概念,理解得不是很清楚,所以拜读了@田小计划大神的博客与其他文章,受益匪浅,写这篇随笔算是自己的读书笔记吧~. 作用域 首先明确一个概念,js ...

  5. 《跟我学IDEA》二、配置maven、git、tomcat

    上一篇博文我们讲解了如何去下载并安装一个idea,在这里我们推荐的是zip的解压版,另外我们配置的一些编码和默认的jdk等.今天我们来学习配置maven.git.tomcat等.还是那句话,工欲善其事 ...

  6. OpenXml读取word内容(二)

    注意事项 上一篇已经说明,这次就不一一说了,直接来正文: word内容 相关代码 方法1 static void Main(string[] args) { string wordPathStr = ...

  7. archsummit2017见闻和思考

    前几天参加了archsummit的北京站.2天的日程安排的十分紧凑,大多数时间同时有多场专题分享,选择想要听的专题就成了首要的事情,按照感兴趣的,可能用到的,启发思考的原则选择了几场适合自己的专题,这 ...

  8. hadoop多文件格式输入

    版本号: CDH5.0.0 (hdfs:2.3.mapreduce:2.3,yarn:2.3) hadoop多文件格式输入,一般能够使用MultipleInputs类指定不同的输入文件路径以及输入文件 ...

  9. HDoj-1042 大数阶乘

    N! Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Submis ...

  10. 一行代码搞定ThoughtWorks面试题

    今天在微博看到一道有趣的题目.作为python的脑残粉,自然手痒. 题目在这里. FizzBuzzWhizz 你是一名体育老师.在某次课距离下课还有五分钟时,你决定搞一个游戏.此时有100名学生在上课 ...