html 选择图片后马上展示出来

document.getElementById('file4').onchange = function(evt) {
        // 如果浏览器不支持FileReader，则不处理
        if (!window.FileReader) return;
        var files = evt.target.files;
        for (var i = 0, f; f = files[i]; i++) {
            if (!f.type.match('image.*')) {
                continue;
            }
            var reader = new FileReader();
            reader.onload = (function(theFile) {
                return function(e) {
                    // img 元素
                    document.getElementById('pic4').src = e.target.result;
                };
            })(f);
            reader.readAsDataURL(f);
        }
    }

 jquery方法

$('.yyzz_a input').change(function(evt){
            // 如果浏览器不支持FileReader，则不处理
            if (!window.FileReader) return;
            var files = evt.target.files;
            for (var i = 0, f; f = files[i]; i++) {
                if (!f.type.match('image.*')) {
                    continue;
                }
                var reader = new FileReader();
                var obj = $(this).parent().children('label').children('img');//$(obj).remove();
                reader.onload = (function(theFile) {
                    return function(e) {
                        // img 元素
                        $(obj).attr('src',e.target.result);
                    };
                })(f);
                reader.readAsDataURL(f);
            }
        })

 

转载于:https://www.cnblogs.com/whlives/p/5147482.html