<!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. QMainWindow: No such file or directory 问题的解决方法

    这种问题往往是由于QT4的程序转换到QT5所导致的,在.pro文件中加上一句 greaterThan(QT_MAJOR_VERSION, 4): QT += widgets 就可以解决问题

  2. python命名空间的本质

    Python的命名空间是Python程序猿必须了解的内容,对Python命名空间的学习,将使我们在本质上掌握一些Python中的琐碎的规则. 接下来我将分四部分揭示Python命名空间的本质:一.命名 ...

  3. Error:Cause: org/gradle/api/publication/maven/internal/DefaultMavenFactory 解决办法

    当你使用的Gradle版本是2.4以上,Android插件版本是1.3.0以上的时候就会出现这个问题,这时候你只需将android-maven-gradle-plugin插件版本改为classpath ...

  4. Linux：时间同步

    时间同步 硬件时间的设置 hwclock clock clock和hwclock用法相近,只用一个就行,只不过clock命令除了支持x86硬件体系外,还支持Alpha硬件体系. 查看硬件时间 hwcl ...

  5. 如何使用JFinal开发javaweb

    介绍开始: 编辑器:MyEclipse; 数据库:MySQL; 服务器:tomcat; 1 首先新建web项目 要强调的是Target runtime必须选择为None.然后点击两次Next,选中创建 ...

  6. echarts-detail--柱状图

    一:柱形图 1.Echarts-柱状图柱图宽度设置-----只需要设置series中的坐标系属性barWidth就可以 /** * 堆积柱状图 * @param xaxisdata x轴:标签(数组) ...

  7. 深度学习（六十八）darknet使用

    这几天因为要对yolo进行重新训练,需要用到imagenet pretrain,由于网络是自己设计的网络,所以需要先在darknet上训练imagenet,由于网上都没有相关的说明教程,特别是图片路径 ...

  8. 自己手写一个SpringMVC框架

    前端框架很多,但没有一个框架称霸,后端框架现在Spring已经完成大一统.所以学习Spring是Java程序员的必修课. Spring框架对于Java后端程序员来说再熟悉不过了,以前只知道它用的反射实 ...

  9. js之数码时钟加随机变色

      HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...

  10. 【剑指offer】数组中出现次数超过数组长度一半的数字，C++实现

    原创博文,转载请注明出处! # 题目 数组中有一个数字出现的次数超过数组长度的一半,请找出这个数字.例如输入一个长度为9的数组{1,2,3,2,2,2,5,4,2}.由于数字2在数组中出现了5次,超过 ...