主要用的是html5的文件系统部分：
<html> <head> <meta name="viewport" content="width=device-width, minimum-scale=0.1"> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <title>xxx</title> <script src="im.js"></script> <script> function handleFiles(files) { var preview = document.getElementById('preview'); for (var i = 0; i < files.length; i++) { var file = files[i]; var imageType = /^image//; if ( !imageType.test(file.type) ) { continue; } var img = document.createElement("img"); img.classList.add("obj"); img.file = file; // 假设 "preview" 是将要展示图片的 div preview.appendChild(img); var reader = new FileReader(); reader.onload = (function(aImg) { return function(e) { aImg.src = e.target.result; }; })(img); reader.readAsDataURL(file); } } </script> </head> <body style="margin: 25px;"> <input type="file" id="input" onchange="handleFiles(this.files)"> <div id = "preview"></div> <!-- <img src="file:///Users/staff/Desktop/%E5%9C%B0%E8%A1%A8.png" width="2500" height="650"> --> </body> </html>
参考：
https://developer.mozilla.org/zh-CN/docs/Using_files_from_web_applications
http://hushicai.com/2014/03/29/html5-du-qu-ben-di-wen-jian.html
http://www.html5rocks.com/zh/tutorials/file/filesystem/#toc-file