图片上传预览支持html5的浏览器

图片预览功能实现

转载于 2017-01-16 10:44:00 发布 · 49 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/ideacore/p/6288775.html

本文介绍了一种使用HTML和JavaScript实现文件输入后即时预览图片的方法。通过FileReader API读取用户选择的图片文件，并将其显示在页面上。

<img src="" width="100px" height="100px"/>
<input type="file" onchange="showPreview(this)"/>
//图片预览的
function showPreview(source){
    var file = source.files[0];
    if(window.FileReader) {
        var fr = new FileReader();
        fr.onloadend = function(e) {
            $(source).parent().children("img").attr("src",e.target.result);
        };
        fr.readAsDataURL(file);
    }
}