JS 中的 FileReader 结合 input:file 可以很方便的读取本地文件. 不过要知道 FileReader 读取文件采用的是异步机制.
html:
- <!--accept 只能与 file 配合使用. 它可以限制上传的文件类型
- 当然你也可以写成 accept="image/*"-->
- <div>
- <input type="file" id="myimg"
- onchange="imgChange(this)"
- accept="image/png,image/gif,image/jpeg"/>
- <img width="300px" src=""alt="">
- </div>
JS:
- function imgChange(img) {
- // 生成一个文件读取的对象
- var reader = new FileReader();
- reader.onload = function (ev) {
- // base64 码
- var imgFile =ev.target.result;// 或 e.target 都是一样的
- document.querySelector("img").src= ev.target.result;
- }
- // 发起异步读取文件请求, 读取结果为 data:url 的字符串形式,
- reader.readAsDataURL(img.files[0]);
- }
来源: http://www.jianshu.com/p/517aa09af558