Question

我正在尝试创建一个小型应用程序，该应用程序将允许我创建一个选项卡图像库。我已经可以通过下面的代码成功上传图像，但是一旦选择了我的图像文件，它们就会立即显示在分配的缩略图中。我仍然希望图像显示在缩略图中，但是仅当发生单击时才显示。如何创建一个功能，该功能将捕获文件，然后单击按钮将它们分配给适当的缩略图？任何帮助，将不胜感激。我希望不使用任何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 个答案: