zoukankan      html  css  js  c++  java
  • 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);
                }
            })
  • 相关阅读:
    day006 数字类型和字符串类型的内置方法
    awk技巧 nginx access.log
    测试访问速度
    ELK Deployed
    jenkins权限控制
    linux 系统优化
    nginx 刷新显示404
    虚拟机安装的ubutun全屏
    在线生成二维码
    GIT 命令集
  • 原文地址:https://www.cnblogs.com/whlives/p/5147482.html
Copyright © 2011-2022 走看看