1. <!DOCTYPE HTML>
    <html>
    <head>
       <title>上传图片</title>
       <meta charset="utf-8">
    </head>
    <body>
    <iframe name="uploadfrm" id="uploadfrm" style="display: none;"></iframe>
    <form name="formHead" method="post" action="" id="formHead" enctype="multipart/form-data" target="uploadfrm">
  2.  
  3.    <div>
          <div>
             <input type="file" name="file_head" id="file_head" onchange="javascript:setImagePreview();" />
          </div>
          <div>
             <div id="DivUp" style="display: none">
                <input type="submit" data-inline="true" id="BtnUp" value="确认上传" data-mini="true" />
             </div>
          </div>
       </div>
    </form>
    <div data-role="fieldcontain">
       <div id="localImag">
          <img id="preview" width="-1" height="-1" style="display: none" />
       </div>
    </div>
  4.  
  5. <script type="text/javascript">
        function setImagePreview() {
            var preview, img_txt, localImag, file_head = document.getElementById("file_head"),
                picture = file_head.value;
            if (!picture.match(/.jpg|.gif|.png|.bmp/i)) return alert("您上传的图片格式不正确，请重新选择！"),
                !1;
            if (preview = document.getElementById("preview"), file_head.files && file_head.files[0]) preview.style.display = "block",
                preview.style.width = "63px",
                preview.style.height = "63px",
                preview.src = window.navigator.userAgent.indexOf("Chrome") >= 1 || window.navigator.userAgent.indexOf("Safari") >= 1 ? window.webkitURL.createObjectURL(file_head.files[0]) : window.URL.createObjectURL(file_head.files[0]);
            else {
                file_head.select(),
                    file_head.blur(),
                    img_txt = document.selection.createRange().text,
                    localImag = document.getElementById("localImag"),
                    localImag.style.width = "63px",
                    localImag.style.height = "63px";
                try {
                    localImag.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)",
                        localImag.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = img_txt
                } catch(f) {
                    return alert("您上传的图片格式不正确，请重新选择！"),
                        !1
                }
                preview.style.display = "none",
                    document.selection.empty()
            }
            return document.getElementById("DivUp").style.display = "block",
                !0
        }
    </script>
    </body>
    </html>
  6.  
  7. 来源 ::https://www.cnblogs.com/lijuntao/p/6527135.html

h5调用手机摄像头/相册的更多相关文章

  1. 使用HTML5+调用手机摄像头和相册

    前言:前端时间使用HTML5做了一个WEB端APP,其中用到了H5页面调用手机摄像头的功能,当时也是花了不少时间去研究.最终是采用了HTML5plus(HTML5+)的方式完成了该功能,现将具体方法简 ...

  2. H5调用相机和相册更换头像

    需求:H5调用手机的相机和相册从而实现更换头像的功能 这个功能是很常用的一个功能,因此做一个记录. 1.在头像img下加一个文件输入框 <input type="file" ...

  3. html5调用手机摄像头，实现拍照上传功能

    今天做手机网站,想实现手机扫描二维码功能.首先实现在浏览器中调用手机摄像头,实现拍照功能并且把拍下的照片显示在页面并上传到服务器上,然后再在服务器端进行分析. 首先实现在浏览器中调用摄像头,当然用现在 ...

  4. 怎样让HTML5调用手机摄像头拍照——实践就是一切

    原文:怎样让HTML5调用手机摄像头拍照--实践就是一切 NanShan 小编将思路提供给了大家.学编程最重要的是实践,我这尽管有完好的代码,可是希望大家都能够自己写出属于自己的代码 HTML5 Th ...

  5. HTML5调用手机摄像头,仅仅支持OPPOHD浏览器

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. 亲测可用）html5 file调用手机摄像头

    在切图网一个客户的webapp项目中需要用到 html5调用手机摄像头,找了很多资料,大都是 js调用api  然后怎样怎样,做了几个demo测试发现根本不行, 后来恍然大悟,用html5自带的 in ...

  7. H5 调用 手机设备的功能

    1.调用 邮件 : 参考 https://blog.csdn.net/github_38516987/article/details/77637546 (亲测有效) <a href=" ...

  8. h5调用手机相册摄像头以及文件夹

    在之前一家公司的时候要做一个app里面有上传头像的功能,当时研究了好久,找到了一篇文章关于h5摄像头以及相册的调用的,所以就解决了这个问题了!!我这里记录一下以便后面有人需要,可以参考一下!!!! 下 ...

  9. js 调用手机摄像头或相册并展示图片

    效果图 手机浏览器.微信打开该网页,都支持调用摄像头拍照和打开相册. 先看最终结果: 每次点击“点击上传”,可以选择相册或者拍照,选完以后可以多展示一张图片,同时上传服务器. 点击“重新上传”,清空所 ...

随机推荐

  1. jqeury 基础

    jquery 选择器: 基本选择器:#id ..class.*(匹配所有) 层次选择器: $(div span) 选取<div>里的所有的<span>元素. $(div> ...

  2. Linux输入输出管理

      一.系统输入输出的理解 运行一个程序时,需要从某个位置读取输入信息,然后CPU处理,最后将输出 显示在屏幕或文件中:其中,某个位置相当于输入设备,屏幕或文件为输出设备. 标准输入:stdin,默认 ...

  3. MVC4中视图获取控制器中返回的json格式数据

    再开发MVC项目时,有时只需要从控制器中返回一个处理的结果,这时返回Json格式的数据非常的方便,在Controller中,提供了几种返回类型和方法,如: Content() 返回文本类型的Conte ...

  4. react 问题

    安装依赖报错问题                                           可能需要按顺序安装,  不能cnpm npm 混合安装, 参考react项目入门 react an ...

  5. ubuntu16.04LTS 64位 下载influxdb

    wget https://dl.influxdata.com/influxdb/releases/influxdb_1.2.0_amd64.deb sudo dpkg -i influxdb_1.2. ...

  6. SQLServer OpenRowSet 导入数据

    今早上同事要求从SQLServer2008导出一部分数据到SQLServer2000中作为演示/测试数据,开始也没想多,直接去SQLServer2000的企业管理器中,用了数据导入的功能.以为完事了, ...

  7. [转载]Unicode中对中文字符的编码

    以前写过一篇贴子是写中文在unicode中的编码范围 unicode中文范围,但写的不是很详细,今天再次研究了下unicode,并给出详细的unicode取值范围. 本次研究的unicode对象是un ...

  8. NOI 模拟赛

    T1 Article 给 $m$ 个好串,定义一个字符串分割方案是好的当且仅当它分割出来的子串中"是好串的子串"的串长占原串串长超过 85%,定义一个好的分割方案的权值为这种分割方 ...

  9. 剑指offer第七章&第八章

    剑指offer第七章&第八章 1.把字符串转换成整数 将一个字符串转换成一个整数,要求不能使用字符串转换整数的库函数. 数值为0或者字符串不是一个合法的数值则返回0 输入描述: 输入一个字符串 ...

  10. Service Mesh 了解

    是什么 Service Mesh是专用的基础设施层. 轻量级高性能网络代理. 提供安全的.快速的.可靠地服务间通讯. 与实际应用部署一起但对应用是透明的 作用 提供熔断机制(circuit-break ...