<!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. Windows消息队列(优先队列，结构体中放比较函数)

    Windows消息队列 消息队列是Windows系统的基础.对于每个进程,系统维护一个消息队列.如果在进程中有特定事件发生,如点击鼠标.文字改变等,系统将把这个消息加到队列当中.同时,如果队列不是空的 ...

  2. 利用国内镜像下载Android源码，并编译生成image镜像文件

    为了编译安卓源码,首先需要一个Linux,本次采用Ubuntu Kylin14.04,内核版本3.13.装在四核.4G内存.1T硬盘的虚拟机上查看内核版本号:$uname -all清华镜像地址清华镜像 ...

  3. resultMap的使用

    1)属性 id:resultMap的唯一标识 type:Java实体类 2)子元素 id 一般对应数据库中该行的主键id,设置此项可提高MyBatis性能 result 映射到JavaBean的某个“ ...

  4. 【HEVC学习与研究】29、解码第一个Coding Quadtree结构（1）

    ctu tree属性 http://blog.csdn.net/shaqoneal/article/details/26088817

  5. live555源码分析

    live555源代码下载(VC6工程):http://download.csdn.net/detail/leixiaohua1020/6374387 liveMedia 项目(http://www.l ...

  6. Chrome浏览器清除页面js文件缓存的方法

    Chrome浏览器清除页面js文件缓存 Chrome浏览器清除js缓存方法虽然简单,但有些人还是不太会,有些人会去设置里面清除有时候没有用,这里写一下简单步骤,使用一次以后就会了,而且速度更快 1.打 ...

  7. anjular2以及微信小程序的一点比较

    1条件渲染: 小程序:用 wx:if="{{condition}}" 来判断是否需要渲染该代码块. <view wx:if="{{condition}}" ...

  8. 对于KVO，你真的了解么？

      目录 关于面试 官方文档 核心代码 (Key-Value Observing) 进阶(手动创建KVO) 关于isa指针 参考文章链接 一.关于面试 面试官:谈一谈你对KVO的理解? A:添加响应者 ...

  9. 一个关于PCA的疑问

    我们知道PCA干的事情是把n维的样本投影到k维,同时丢失的信息能够达到最少. 为什么说principal component是covariance matrix的特征值中最大的前k个对应的特征向量上的 ...

  10. 我在ubuntu14.04安装使用的软件

    搜狗拼音sougoupinyin:sudo add-apt-repository ppa:fcitx-team/nightly && sudo apt-get updatesudo a ...