<!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">

   <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>

<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>

来源 ::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. 【LeetCode 104_二叉树_遍历】Maximum Depth of Binary Tree

    解法一:递归 int maxDepth(TreeNode* root) { if (root == NULL) ; int max_left_Depth = maxDepth(root->lef ...

  2. SpringInAction--条件化的Bean

    学习了profile bean之后,发现有的时候bean还是有根据环境来选择的余地的,那么假设我们希望某个bean只有当另外某个特定的bean也声明了之后才会创建.我们还可能要求只有某个特定的环境变量 ...

  3. Linux虚拟机基本操作

    ---恢复内容开始---  一.输入法调整 实现步骤:Application ------> System Tools ------>Settings ------>Rejion&a ...

  4. Wireshark小技巧

    抓头部: 时间格式设置: 自定义颜色: 快速过滤TCP/UDP: 过滤一个TCP/UDP Stream: 根据感兴趣内容生成表达式:如果右击的是Apply as Filter则生成表达式并自动执行

  5. Android 编程 AMapLocationClientOption 类中的 setMockEnable （高德地图 com.amap.api.location.AMapLocationClientOption 中的类）

    setMockEnable 高德地图中 AMapLocationClientOption 中有一个方法是设置APP是否接受模拟定位的设置,就是方法 setMockEnable //设置是否允许模拟位置 ...

  6. JavaScript库基本格式写法

    /********************************************************************* * JavaScript库基本格式写法 * 说明: * 由 ...

  7. mysql安装优化

    安装centos7 安装mysql解决方案1 安装mariadb解决方案2 官网下载安装mysql-server时区批量配置编码远程连接my.cnf简版的参数说明核心配置参数升级版mysql存储引擎M ...

  8. Jmeter简单的接口测试

    1.新建线程组 2.编辑线程组信息 3.在线程组中添加HTTP信息头管理器 4.配置HTTP信息头管理器 参数格式配置 5.在线程组中添加HTTP请求 6.编辑HTTP请求信息 7.添加响应断言 8. ...

  9. Codeforces 9D How many trees? 【计数类DP】

    Codeforces 9D How many trees? LINK 题目大意就是给你一个n和一个h 问你有多少个n个节点高度不小于h的二叉树 n和h的范围都很小 感觉有无限可能 考虑一下一个很显然的 ...

  10. BZOJ1096 ZJOI2007 仓库建设 【斜率优化DP】

    BZOJ1096 ZJOI2007 仓库建设 Description L公司有N个工厂,由高到底分布在一座山上.如图所示,工厂1在山顶,工厂N在山脚.由于这座山处于高原内陆地区(干燥少雨),L公司一般 ...