【JavaScript小项目】在网页上显示选择的图片

efonfighting

发布于 2020-02-13 17:28:34

1.1K0

发布于 2020-02-13 17:28:34

文章被收录于专栏：一番码客

思路分析

选用<input type="file">原生组件，实现该组件美化。
选用<img src="file">实现图片预览。

代码实现

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>图片预览</title>
        <script src="js/test.js">
            function upload(file) {
                console.log(file)
                let img = document.getElementById('img')
                let formData = new FormData()
                let temp = file.files[0]
                console.log(temp)
                if (temp){
                    formData.append('file',temp)
                    img.src = window.URL.createObjectURL(temp)
                }
            }
        </script>
        <style type="text/css">
            .myBtn{
                padding: 5px 10px;
                background: rgb(92,184,92);
                color: white;
                outline: none;
                border: none;
                border-radius: 5px;
                cursor: pointer;
            }
        </style>
    </head>

    <body>
        <input type="file" style="display: none;" id="file" onchange="upload(this)" />
        <button class="myBtn" onclick="fileBtn()">上传文件</button>
        <br />
        <img src="" id="img" style="width: 50%">
    </body>

</html>