js的几个库
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>
