• FileReader本地预览图片


    <body>
            
            <p><label>请选择一个图像文件:</label><input type="file" id="demo_input" /></p>
            <div id="demo_result"></div>
            
            
            <script type="text/javascript">
                var result = document.getElementById("demo_result");
                var input = document.getElementById("demo_input");
    
                if(typeof FileReader === 'undefined'){
                    result.innerHTML = "<p class='warn'>抱歉,你的浏览器不支持 FileReader</p>";
                    input.setAttribute('disabled','disabled');
                }else{
                    input.addEventListener('change',readFile,false);
                }
                
                function readFile(){
                    var file = this.files[0];
                    if(!/image/w+/.test(file.type)){
                        alert("请确保文件为图像类型");
                        return false;
                    }
                    var reader = new FileReader();
                    reader.readAsDataURL(file);
                    reader.onload = function(e){
                        result.innerHTML = '<img src="'+this.result+'" alt=""/>'
                    }
                }
            </script>
        </body>

    2,下面是我修改的,多图上传,本地预览:

    <html>
        <head>
            <title>File Reader</title>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <style>
                body{
                    text-align:center;
                }
                #demo_result img{
                    border:2px solid #369;
                    padding:3px;
                }
                p{
                    padding:20px 0;
                }
                .warn{
                    font-weight:bold;
                    color:red;
                }
            </style>
        </head>
        <body>
            
            <p><label>请选择一个图像文件:</label>
            <input type="file" multiple="multiple" id="demo_input" />
            </p>
            <div id="demo_result"></div>
            
            
    <script type="text/javascript">
        var result = document.getElementById("demo_result");
        var input = document.getElementById("demo_input");
    
        if(typeof FileReader === 'undefined'){
            result.innerHTML = "<p class='warn'>抱歉,你的浏览器不支持 FileReader</p>";
            input.setAttribute('disabled','disabled');
        }else{
            input.addEventListener('change',readFile,false);
        }
        
        function readFile(){            
            
            for(var i=0;i<this.files.length;i++)
            {
                var file = this.files[i];
                if(!/image/w+/.test(file.type)){
                    alert("请确保文件为图像类型");
                    return false;
                }
                var reader = new FileReader();
                reader.readAsDataURL(file);                    
                reader.onload = function(e){                        
                    result.innerHTML+= '<img src="'+this.result+'" alt=""/>';                        
                }
            }
        }
    </script>
        </body>
    </html>
  • 相关阅读:
    MySQL监控脚本
    django学习笔记【004】创建带有model的app
    MySQL-group-replication 配置
    MySQL配置文件模板
    Python 正则表达式
    MYSQL的安全模式:sql_safe_updates介绍
    Git branch && Git checkout常见用法
    git rebase和git merge的用法
    Git最牛最全详解
    理解npm run
  • 原文地址:https://www.cnblogs.com/zjx2011/p/4885851.html
Copyright © 2020-2023  润新知