http://www.w3.org/TR/FileAPI/

http://www.w3.org/TR/html-media-capture/

demo:http://jsfiddle.net/pmatseykanets/R99NY/

  1.  <!DOCTYPE html>
  2.  <html>
  3.  <head>
  4.      <title>jQM input file capture</title>
  5.      <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.      <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
  7.      <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
  8.      <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
  9.  </head>
  10.  <body>
  11.  
  12.      <div data-role="page" id="page">
  13.          <style>
  14.              #preview {
  15.                  width: 80%; max-width: 300px;
  16.              }
  17.              #preview img {
  18.                  width: 100%;
  19.              }
  20.              .hiddenfile {
  21.               width: 0px;
  22.               height: 0px;
  23.               overflow: hidden;
  24.              }
  25.          </style>
  26.          <div data-role="header">
  27.               <h3>Header</h3>
  28.          </div>
  29.          <div data-role="content">
  30.              <button id="chooseFile">Choose file</button>
  31.              <div class="hiddenfile">
  32.                <input type="file"  data-clear-btn="false" name="image" accept="image/*" capture>
  33.              </div>
  34.              <div id="preview">
  35.              </div>
  36.              <ul id="info" data-role="listview" data-inset="true">
  37.              </ul>
  38.          </div>
  39.  
  40.      </div>
  41.  
  42.      <script>
  43.      $('#page').on('pageinit', function(){
  44.          $("#chooseFile").click(function(e){
  45.              e.preventDefault();
  46.              $("input[type=file]").trigger("click");
  47.          });
  48.          $("input[type=file]").change(function(){
  49.              var file = $("input[type=file]")[0].files[0];
  50.              $("#preview").empty();
  51.              displayAsImage3(file, "preview");
  52.  
  53.              $info = $("#info");
  54.              $info.empty();
  55.              if (file && file.name) {
  56.                  $info.append("<li>name:<span>" + file.name + "</span></li>");
  57.              }
  58.              if (file && file.type) {
  59.                  $info.append("<li>size:<span>" + file.type + " bytes</span></li>");
  60.              }
  61.              if (file && file.size) {
  62.                  $info.append("<li>size:<span>" + file.size + " bytes</span></li>");
  63.              }
  64.              if (file && file.lastModifiedDate) {
  65.                  $info.append("<li>lastModifiedDate:<span>" + file.lastModifiedDate + " bytes</span></li>");
  66.              }
  67.              $info.listview("refresh");
  68.          });
  69.      });
  70.  
  71.      function displayAsImage3(file, containerid) {
  72.          if (typeof FileReader !== "undefined") {
  73.              var container = document.getElementById(containerid),
  74.                  img = document.createElement("img"),
  75.                  reader;
  76.              container.appendChild(img);
  77.              reader = new FileReader();
  78.              reader.onload = (function (theImg) {
  79.                  return function (evt) {
  80.                      theImg.src = evt.target.result;
  81.                  };
  82.              }(img));
  83.              reader.readAsDataURL(file);
  84.          }
  85.      }
  86.  
  87.      </script>
  88.  </body>
  89.  </html>

js的几个库的更多相关文章

  1. Node.js 数据库实时监控库 node-dbmon

    node-dbmon 是一个 Node.js 数据库实时监控库,如果你希望在数据库表数据更改后,或者是文件修改后能更新 GUI,那么这个库正好适合你. https://github.com/strap ...

  2. 【Node.js 自己封装的库 http_parse, libuv】

    [Node.js 自己封装的库 http_parse, libuv] Node.js 介绍:一个网络框架,更多:http://www.oschina.net/p/nodejs 官网:http://no ...

  3. js基础和工具库

    /* * 作者: 胡乐 * 2015/4/18 * js 基础 和 工具库 * * * */ //根据获取对象 function hGetId(id){ return document.getElem ...

  4. js文件上传库

    收集了2个与具体UI库和框架无任何耦合的JS文件上传库:支持断点续传.支持npm安装. resumable.js fileapi

  5. 深入解析Backbone.js框架的依赖库Underscore.js的作用

    这篇文章主要介绍了深入解析Backbone.js框架的依赖库Underscore.js的作用,用过Node.js的朋友对Underscore一定不会陌生:)需要的朋友可以参考下 backbone必须依 ...

  6. HTML5全屏背景视频与 CSS 和 JS（插件或库）

    译文原链接:http://codetheory.in/html5-fullscreen-background-video/ 前言: 当网页载入时,自动播放的全屏背景视频已经成为当前颇受欢迎的趋势. 就 ...

  7. Blazor组件自做一 : 使用JS隔离封装viewerjs库

    Viewer.js库是一个实用的js库,用于图片浏览,放大缩小翻转幻灯片播放等实用操作 本文相关参考链接 JavaScript 模块中的 JavaScript 隔离 Viewer.js工程 Blazo ...

  8. smartcrop.js智能图片裁剪库

    今天将为大家介绍一款近期github上很不错的开源库 – smartcrop.js.它是一款图片处理的智能裁剪库.在很多项目开发中,经常会遇见上传图片的场景,它可能是用户照片信息,也可能是商品图片等. ...

  9. 自己写一个JS单向数据流动库----one way binding

    JS单向流动其实就是数据到视图的过程, 这几天突发奇想,想着弄一个插件, 把DOM结构使用JS进行描述: 因为DOM中的Class , content, id, attribute, 事件, 子元素全 ...

  10. RSuite 一个基于 React.js 的 Web 组件库

    RSuite http://rsuite.github.io RSuite 是一个基于 React.js 开发的 Web 组件库,参考 Bootstrap 设计,提供其中常用组件,支持响应式布局. 我 ...

随机推荐

  1. dubbo的超时处理和配置覆盖

    提供者的设置方式 消费者的设置方式 配置原则 dubbo推荐在Provider上尽量多配置Consumer端属性: 1.作服务的提供者,比服务使用方更清楚服务性能参数,如调用的超时时间,合理的重试次数 ...

  2. eclipse利用sql语句对Oracle数据库进行操作

    对Oracle数据库执行操作的sql语句中表名和列名都需用英文双引号("")括起来. 注(\为转义符) 1.插入数据 sql = "insert into \" ...

  3. 再来看看Java的新特性——Stream流

    半年前开始试着使用Java的新特性,给我印象最深的就是Stream流和Optional.其中Stream提高了看法效率,让代码看起来十分清爽. 为什么要使用流? 摘要中已经说明了,为了提高开发效率.流 ...

  4. 使用java获取手机号归属地等信息httpClient实现

    java获取手机号归属地 一般想获取手机号归属地等信息个人是无法获取的,但是可以通过调用第三方接口获取,具体百度搜索很多这里例子提供一个淘宝的接口 ,该功能已经发布到网站作为一个在线小工具,拿走不谢: ...

  5. 三十七、www服务nginx进阶

    六.查看nginx默认首页和目录:如下,可以看到,默认的目录是html,首页是index.html [root@djw1 conf]# grep html nginx.conf            ...

  6. P2486 [SDOI2011]染色 区间合并+树链剖分（加深对线段树的理解）

    #include<bits/stdc++.h> using namespace std; ; struct node{ int l,r,cnt,lazy; node(,,,):l(l1), ...

  7. poj 2342树形dp板子题1

    http://poj.org/problem?id=2342 #include<iostream> #include<cstdio> #include<cstring&g ...

  8. iOS 中UIWebView的cookie

    有关cookie是什么,大家可以自行百度,本文我获得cookie的目的是得到一个userID. 下面的是代码. - (void)getUserIDFromCookie { NSHTTPCookieSt ...

  9. LG_2967_[USACO09DEC]视频游戏的麻烦Video Game Troubles

    题目描述 Farmer John's cows love their video games! FJ noticed that after playing these games that his c ...

  10. Python常用的数据结构详解

    数据结构:通俗点说,就是储存大量数据的容器.这里主要介绍Python的4种基本数据结构:列表.字典.元组.集合. 格式如下: 列表:list = [val1,val2,val3,val4],用中括号: ...