<!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. kvm虚拟主机安装速度很慢

    在c6220 II上部署虚拟化遇到的问题: 1.部署完kvm后,安装虚拟主机的过程非常缓慢,但是最终能成功 原因:宿主机BIOS的virtualization technology设置为Disable ...

  2. spring项目加载不出来静态资源

    方法1: 拦截器中增加针对静态资源不进行过滤(涉及spring-mvc.xml) <!-- 添加注解驱动 --> <mvc:annotation-driven/> <!- ...

  3. L160

    In the Soviet Union several cases have been reported recently of people whocan read and detect colou ...

  4. 在servlet中的中文乱码，相对路径和绝对路径

    默认情况下在servlet中的中文是显示不出来的,解决问题就是加resp.setContentType("text/html;charset=gbk"); 而且这句加的话必须写在P ...

  5. 微信红包算法TEST

    1.基本算法 设定总金额为10元,有N个人随机领取:N=1 则红包金额=X元: N=2 为保证第二个红包可以正常发出,第一个红包金额=0.01至9.99之间的某个随机数 第二个红包=10-第一个红包金 ...

  6. @Qualifier注解详解

    @Qualifier注解意味着可以在被标注bean的字段上可以自动装配.Qualifier注解可以用来取消Spring不能取消的bean应用. 下面的示例将会在Customer的person属性中自动 ...

  7. (转)MapReduce Design Patterns（chapter 1）（一）

    翻译的是这本书: Chapter 1.Design Patterns and MapReduce MapReduce 是一种运行于成百上千台机器上的处理数据的框架,目前被google,Hadoop等多 ...

  8. Vim技能修炼教程(11) - 代码折叠

    上一讲我们是程序员篇的第一讲,关于代码跳转.代码跳转是一个付出很少收获很大的功能.这一节我们开始一个收获很多,但是付出也相对多一点功能:代码折叠. 代码折叠 折叠的类型 折叠有下面几种类型: * Ma ...

  9. java入门学习（5）—面向对象注意点总结

    1.一个类里面最多有5种成份(属性,方法,构造器,还有两种还没有涉及). 2.定义方法时又返回值的保证最起码有一个有效的return语句,最起码让其在编译的时候就识别到,而不是经过判断识别,如通过if ...

  10. xcode好玩的条件断点设置. 可以真人发声。

    哈哈.设置个条件断点. 然后 Logmessage  or speak message 挺有意思. 一听就知道是哪个断点触发了.