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

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

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

 <!DOCTYPE html>

 <html>

 <head>

     <title>jQM input file capture</title>

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />

     <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>

     <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>

 </head>

 <body>

     <div data-role="page" id="page">

         <style>

             #preview {

                 width: 80%; max-width: 300px;

             }

             #preview img {

                 width: 100%;

             }

             .hiddenfile {

              width: 0px;

              height: 0px;

              overflow: hidden;

             }

         </style>

         <div data-role="header">

              <h3>Header</h3>

         </div>

         <div data-role="content">

             <button id="chooseFile">Choose file</button>

             <div class="hiddenfile">

               <input type="file"  data-clear-btn="false" name="image" accept="image/*" capture>

             </div>

             <div id="preview">

             </div>

             <ul id="info" data-role="listview" data-inset="true">

             </ul>

         </div>

     </div>

     <script>

     $('#page').on('pageinit', function(){

         $("#chooseFile").click(function(e){

             e.preventDefault();

             $("input[type=file]").trigger("click");

         });

         $("input[type=file]").change(function(){

             var file = $("input[type=file]")[0].files[0];

             $("#preview").empty();

             displayAsImage3(file, "preview");

             $info = $("#info");

             $info.empty();

             if (file && file.name) {

                 $info.append("<li>name:<span>" + file.name + "</span></li>");

             }

             if (file && file.type) {

                 $info.append("<li>size:<span>" + file.type + " bytes</span></li>");

             }

             if (file && file.size) {

                 $info.append("<li>size:<span>" + file.size + " bytes</span></li>");

             }

             if (file && file.lastModifiedDate) {

                 $info.append("<li>lastModifiedDate:<span>" + file.lastModifiedDate + " bytes</span></li>");

             }

             $info.listview("refresh");

         });

     });

     function displayAsImage3(file, containerid) {

         if (typeof FileReader !== "undefined") {

             var container = document.getElementById(containerid),

                 img = document.createElement("img"),

                 reader;

             container.appendChild(img);

             reader = new FileReader();

             reader.onload = (function (theImg) {

                 return function (evt) {

                     theImg.src = evt.target.result;

                 };

             }(img));

             reader.readAsDataURL(file);

         }

     }

     </script>

 </body>

 </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. CSS公共样式模版

    CSS文件命名为global.css,一般此CSS文件是用于装全站主要框架CSS样式代码和初始化的CSS样式. 通常会放初始化CSS代码如下: body, div, ul, ol, dl, dt, d ...

  2. 许家印67亿买下FF恒大是要雪中送炭吗？

    从大环境来看,当下新能源汽车已经是备受投资者青睐的领域.据不完全统计,当下国内已经有300余家电动汽车企业.而蔚来.小鹏.威马等动辄都融资上百亿元,显现出火爆的发展趋势.甚至就连董明珠董大姐也有着自己 ...

  3. python_检测一些特定的服务端口有没有被占用

    一个python端口占用监测的程序,该程序可以监测指定IP的端口是否被占用. #!/usr/bin/env python# -*- coding:utf-8 -*- import socket, ti ...

  4. ionic 创建服务命令

    创建Util工具库 ionic g provider Util

  5. CCS|ANSI|中华人民共和国标准化法|国标|ISO|IEC|Ieeexplore|

    国家的标准的有效期,标龄是5年.强制性标准是是指为保障人体的健康.人身.财产安全的标准和法律.行政法规定强制执行的标准,如药品标准.食品卫生标准. CCS:分类法简写图 国际标准,比如美国国家标准AN ...

  6. java中的赋值

    java中的赋值使用符号“=”. 按照java编程思想的解释:它的意思是“取等号右边的值,把它复制给左边”. 当然左边必须是一个明确的,已命名的变量. 基本类型: int a=2; int b=3; ...

  7. 【转】HeadFirst 组合模式+迭代器错误原因以及解决代码

    http://blog.csdn.net/sugar_girl/article/details/53400267     <HeadFirst JAVA设计模式>中用迭代器迭代组合模式是存 ...

  8. Leetcode14._最长公共前缀

    题目 编写一个函数来查找字符串数组中的最长公共前缀. 如果不存在公共前缀,返回空字符串 "". 示例 1: 输入: ["flower","flow&q ...

  9. MySQL5.7安装教程（RPM）

    博主本人平和谦逊,热爱学习,读者阅读过程中发现错误的地方,请帮忙指出,感激不尽 前言: 对应服务器信息: 192.168.247.53 一.MySQL安装(RPM) 1.系统环境设置: 1.1清空系统 ...

  10. POJ2352 Stars [树状数组模板]

    题意:输入一n颗星星的x,y坐标,给定判断level的标准,即某颗星星左下边(不高于它,不超过他,相当于以他为基准的第三象限)星星的数目为level, 输出level从0到n的星星个数. //poj2 ...