原文链接：https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL html 代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" /> <meta name="format-detection" content="telephone=no,email=no,date=no,address=no"> <meta name="apple-mobile-web-app-capable" content="yes" /> <!--ios拖动隐藏浏览器底部工具栏--> <title>Examples</title> <meta name="description" content=""> <meta name="keywords" content=""> <link rel="icon" href="data:image/ico;base64,aWNv"> <!-- 避免favicon.ico请求404 --> <link href="" rel="stylesheet"> <style> img { vertical-align: top; width:500px; } </style> </head> <body> <input id="browse" type="file" onchange="previewFiles()" multiple> <div id="preview"></div> <script type="text/javascript"> function previewFiles() { var preview = document.querySelector('#preview'); var files = document.querySelector('input[type=file]').files; function readAndPreview(file) { // Make sure `file.name` matches our extensions criteria if (/\.(jpe?g|png|gif)$/i.test(file.name)) { var reader = new FileReader(); reader.addEventListener("load", function() { var image = new Image(); image.title = file.name; image.src = this.result; preview.appendChild(image); }, false); reader.readAsDataURL(file); } } if (files) { [].forEach.call(files, readAndPreview); } } </script> </body> </html>
评论 (0 )
最新评论
暂无评论
赶紧努力消灭 0 回复