HTML5 图片上传预览(调用摄像头、文件)demo效果示例(整理)

简介: HTML5 图片上传预览(调用摄像头、文件)demo效果示例(整理)
<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="utf-8" />
    <meta name="author" content="EdieLei" />
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport">
    <title>HTML5 图片上传预览</title>
    <style>
      #photo {
        width: 100px;
        height: 100px;
        margin: auto;
        margin-top: 100px;
        background: #cfeab2;
        border-radius: 100px;
      }
      #photo img {
        width: 100px;
        height: 100px;
        border-radius: 50px;
      }
    </style>
    <script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
    <script type="text/javascript">
      $(function() {
        $('#img').change(function() {
          var file = this.files[0];
          var r = new FileReader();
          r.readAsDataURL(file);
          $(r).load(function() {
            $('#photo').html('<img src="' + this.result + '" alt="" />');
          })
        })
      })
    </script>
  </head>
  <body>
    <h3>HTML5图片上传预览</h3>
    <input id="img" type="file" accept="image/*" />
    <div id="photo"></div>
  </body>
</html>

相关文章
|
1月前
|
前端开发
【HTML专栏2】VSCode的使用(新建HTML文件)
【HTML专栏2】VSCode的使用(新建HTML文件)
40 0
|
1月前
|
Java
有关Java发送邮件信息(支持附件、html文件模板发送)
有关Java发送邮件信息(支持附件、html文件模板发送)
84 1
|
1月前
|
XML 前端开发 数据格式
BeautifulSoup 是一个 Python 库,用于从 HTML 和 XML 文件中提取数据
【5月更文挑战第10天】BeautifulSoup 是 Python 的一个库,用于解析 HTML 和 XML 文件,即使在格式不规范的情况下也能有效工作。通过创建 BeautifulSoup 对象并使用方法如 find_all 和 get,可以方便地提取和查找文档中的信息。以下是一段示例代码,展示如何安装库、解析 HTML 数据以及打印段落、链接和特定类名的元素。BeautifulSoup 还支持更复杂的查询和文档修改功能。
35 1
|
1天前
|
XML 数据采集 前端开发
Python第二章(HTMl文件,CSS语言与第三方库Beautiful Soup)
Python第二章(HTMl文件,CSS语言与第三方库Beautiful Soup)
|
1天前
|
Ubuntu C++ Docker
Docker的基本指令和HTML/PYTHON/C++的简单创建示例
Docker的基本指令和HTML/PYTHON/C++的简单创建示例
|
1月前
|
前端开发 文件存储 Python
python之xhtml2pdf: HTML转PDF工具示例详解
python之xhtml2pdf: HTML转PDF工具示例详解
50 0
|
1月前
|
数据采集 数据挖掘 Python
Python之html2text: 将HTML转换为Markdown 文档示例详解
Python之html2text: 将HTML转换为Markdown 文档示例详解
30 0
|
1月前
|
缓存 JavaScript 前端开发
html文件压缩
【4月更文挑战第28天】html文件压缩
43 5
|
1月前
|
JSON JavaScript 数据格式
python遍历目录文件_结合vue获取所有的html文件并且展示
python遍历目录文件_结合vue获取所有的html文件并且展示
14 0
|
1月前
【代码片段】【HTML】弹出对话框点选加载文件
【代码片段】【HTML】弹出对话框点选加载文件
19 1