input框选择图片时,将图片显示在下方

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>修改logo</title>
    <link rel="stylesheet" href="bootstrap.min.css">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
      <style>
       #box img{
          width: 100px;
          height: 100px;
       }
    </style>
</head>
<body>
    <div class="container">
            <form action="1.php"  method="POST" 
             enctype="multipart/form-data">
              <div class="form-group">
                <input type="file" onchange='readImage(this,"#box")' name="image">
                <div id="box">
                <br>
                ![](1.jpg)
                </div>
            </div>
            <button type="submit" class="btn btn-success">确认</button>
        </form>

    </div>
    <script>
           function readImage(fileObj,box,max) {
        // if(max&&fileObj.files.length>max){
        //     fileObj.value='';
        //     alert('文件数量超过上限,请重新选取')
        // }
        document.querySelector(box).innerHTML='';
        var i=0;

        var frObj = new FileReader();

        frObj.onload = function() {
            var img = document.createElement("img");
            img.src = frObj.result;
            document.querySelector(box).appendChild(img);
            // if(i<fileObj.files.length){
            //     i++;
            //     frObj.readAsDataURL(fileObj.files[i]);
            // }
        }
        frObj.readAsDataURL(fileObj.files[i]);
    }
    </script>
</body>
</html>
demo.png
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容