如何通过单击按钮上传文件图像

Question

我正在尝试创建一个允许我创建选项卡图像库的小型应用程序。 我已经能够在下面的代码中成功上传图像，但是一旦选择了我的图像文件，它们就会立即显示在分配的缩略图中。 我仍然希望图像显示在缩略图中，但只有当点击发生时。 如何创建一个 function 来抓取文件，然后通过单击按钮将它们分配给正确的缩略图？ 任何帮助，将不胜感激。 我希望不要使用任何 php，我试图保持前端开发人员对此的看法。 谢谢！

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image Gallery App</title>
    <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    
</head>
<body>
    <div class="fieldset">
        <legend>Your Images</legend>
        <div>
            <label for="avatar">Upload Your Image:</label>
            <input type="file" id="avatar1" name="avatar1" data-thumb='thumbnail-one' required="">
            <button type="submit" id="delete_btn_1">Delete</button>
          </div>
          <div>
            <label for="avatar">Upload Your Image:</label>
            <input type="file" id="avatar2" name="avatar2" data-thumb='thumbnail-two' required="">
            <button type="submit" class="delete_btn">Delete</button>
          </div>
          <div>
            <label for="avatar">Upload Your Image:</label>
            <input type="file" id="avatar3" name="avatar3" data-thumb='thumbnail-three' required="">
            <button type="submit" class="delete_btn">Delete</button>
          </div>
        <div class="submit-container">
            <button type="submit" id="submit_btn">Submit</button>
        </div>
    </div>

    <div class="container">
        <div class="col">
            <div class="box thumbnail-one">
                <img src="https://http.cat/100" alt="Nature" style="width:100%">
            </div>
            <div class="box thumbnail-two">
                <img src="https://http.cat/405" alt="Snow" style="width:100%">
            </div>
            <div class="box thumbnail-three">
                <img src="https://http.cat/504" alt="Mountains" style="width:100%">
            </div>
        </div>
        <div class="col">
            <div class="full-image">
                <span onclick="this.parentElement.style.display='none'" class="closebtn">&times;</span>
                <img src="https://http.cat/100" id="expandedImg" />
            </div>
        </div>
    </div>

    
</body>
</html>


jQuery 

        $(window).on('load', function() {
            var files = $("input[type=file]");
            files.change(function(e) {
                if (this.files && this.files[0]) {
                    let thumb = $(this).data('thumb');
                    // let thumb = $(this).attr('data-thumb'); // alternative to above line.
                    var reader = new FileReader();
                    reader.onload = function(e) {
                        $("." + thumb + " img").attr("src", e.target.result);
                        $('.full-image img').attr("src", e.target.result);
                        $("#avatar1").html(e.target.result); 
                    }
                    reader.readAsDataURL(this.files[0]);
                    console.log(this.files[0]);
                }    
            });
        });

        $(document).ready(function() {
            $('.box').click(function() {
                $('.full-image').html($(this).html());
            });

            $('#delete_btn_1').click(function() {
                $('#avatar1').val(''); 
            });

            $("#submit_btn").on("click", function() {
                $("." + thumb + " img").attr("src", e.target.result);
                $('.full-image img').attr("src", e.target.result);
            });
        });

CSS 

        body {
            font-family: 'Poppins', Verdana, Arial, sans-serif;
        }

        .fieldset {
            background-color: lavender;
            border: 10px solid darkblue;
            border-radius: 20px;
            margin: 20px auto;
            width: 720px;
        }

        legend {
            background-color: purple;
            border-radius: 10px;
            color: white;
            padding: 12px;
            margin: 5px;
        }

        .fieldset div {
            margin: 10px;
        }

        label {
            display: inline-block;
            text-align: right;
            vertical-align: top;
            width: 200px;
        }

        .submit-container {
            /* width: 100%; */
            text-align: right;
        }

        .container {
            width: 60%;
            overflow: hidden;
            margin: 100px auto;
        }

        .box {
            width: 100px;
            height: auto;
            padding: 10px;
        }

        .box {
            cursor: pointer;
        }

        .full-image {
            width: 580px;
            height: 580px;
            padding: 10px;
        }

        .col {
            float: right;
        }

        .full-image img {
            width: 100%;
            /* height: 100%; */
        }

        .closebtn {
            position: absolute;
            top: 10px;
            right: 15px;
            color: white;
            font-size: 35px;
            cursor: pointer;
        }

Answer 1

据我了解，您希望在用户单击submit按钮时加载图像，而不是在文件上传时加载。

为此，从files.change(function(e) {}复制代码并将 int 粘贴到提交按钮click事件中。

例如：

$("#submit_btn").on("click", function () {
    var files = $("input[type=file]");
    files.each(function (e) {
        if (this.files && this.files[0]) {
            let thumb = $(this).data('thumb');
            var reader = new FileReader();
            reader.onload = function (e) {
                $("." + thumb + " img").attr("src", e.target.result);
                $('.full-image img').attr("src", e.target.result);
                $("#avatar1").html(e.target.result);                      
            }
            reader.readAsDataURL(this.files[0]);
            console.log(this.files[0]);
        }
    });
});

代码块$(window).on('load', function() {... }); 然后可以删除。

如何通过单击按钮上传文件图像

问题描述

1 个解决方案

解决方案1
0 已采纳 2020-08-08 22:05:15

如何通过单击按钮上传文件图像

问题描述

1 个解决方案

解决方案1 0 已采纳 2020-08-08 22:05:15

解决方案1
0 已采纳 2020-08-08 22:05:15