2

我目前正在开发一种可用于上传两个裁剪图像的工具（在本例中为：签名）。为此，我使用 Croppie.js 库。我的问题是只有第二个 preview-crop-upload 有效，而第一个在预览图像时立即返回空白图像。有人可以看到我做错了什么吗？

HTML：

<h4 class="fw-100">2. Upload a clear a signature:</h4><br>
<label for="signature" class="hideonupload">Upload and crop your signature:</label><br class="hideonupload">
<label for="signature" class="btn btn-outline-light cursor-pointer hideonupload" style="margin-bottom: 0">Select signature</label><br class="hideonupload">
<label for="uploaded_image" class="showonupload hidden">Your signature:</label> 
<div id="uploaded_image"></div><br>
<hr class="spacer hideonupload">            
<div class="showonupload hidden">
    <form action="contracttogether.php" method="post">
        <label for="removeupload" class="btn btn-outline-light cursor-pointer" style="margin-bottom: 0">Remove upload</label><br>
        <input type="submit" name="removeupload" id="removeupload" class="hidden"><br><br>
    </form>
</div>

<h4 class="fw-100">3. Upload another signature:</h4><br>
<label for="signature2" class="hideonupload2">Upload:</label><br class="hideonupload2">
<label for="signature2" class="btn btn-outline-light cursor-pointer hideonupload2" style="margin-bottom: 0">Select signature</label><br class="hideonupload2">
<label for="uploaded_image2" class="showonupload2 hidden">Your signature:</label>
<div id="uploaded_image2"></div><br>
<hr class="spacer hideonupload2">
<div class="showonupload2 hidden">
    <form action="contracttogether.php" method="post">
        <label for="removeupload2" class="btn btn-outline-light cursor-pointer" style="margin-bottom: 0">Remove upload</label><br>
        <input type="submit" name="removeupload2" id="removeupload2" class="hidden"><br><br>
    </form>
</div>

<input type="file" name="signature" id="signature" required accept="image/*">
<input type="file" name="signature2" id="signature2" required accept="image/*">

注意：这些上传也有两个单独的模式，但故障不在那里。

JavaScript/jQuery：

$("#close_modal").click(function() {
    $("#uploadimageModal").hide();
});

    $(document).ready(function(){

    $image_crop = $('#image_demo').croppie( {
        enableExif: true,
        viewport: {
            width:359,
            height:385,
            type:'square'
        },
        boundary: {
            width:450,
            height:450
        }
    });

    $('#signature').on('change', function() {
        var reader = new FileReader();
        reader.onload = function(event) {
            $image_crop.croppie('bind', {
                url:event.target.result
            }).then(function() {
                console.log('');
            });
        }
        reader.readAsDataURL(this.files[0]);
        $('#uploadimageModal').modal('show');
    });

    $('.crop_image').click(function(event) {
        $image_crop.croppie('result', {
            type: 'canvas',
            size: 'viewport'
        }).then(function(response) {
            $.ajax({
                url:"assets/php/uploadsignature.php",
                type:"POST",
                data:{"imageupload": response},
                success:function(data) {
                    $('#uploadimageModal').modal('hide');
                    $('#uploaded_image').html(data);
                    $('.hideonupload').hide();
                    $('.showonupload').stop(true, true).fadeIn({ duration: 400, queue: false }).css('display', 'block').slideDown({ duration: 300, easing: method, complete: callback});
                }
            })
        })
    })

});


$("#close_modal2").click(function() {
    $("#uploadimageModal2").hide();
});

$(document).ready(function(){

    $image_crop = $('#image_demo2').croppie( {
        enableExif: true,
        viewport: {
            width:359,
            height:385,
            type:'square'
        },
        boundary: {
            width:450,
            height:450
        }
    });

    $('#signature2').on('change', function() {
        var reader = new FileReader();
        reader.onload = function(event) {
            $image_crop.croppie('bind', {
                url:event.target.result
            }).then(function() {
                console.log('');
            });
        }
        reader.readAsDataURL(this.files[0]);
        $('#uploadimageModal2').modal('show');
    });

    $('.crop_image2').click(function(event) {
        $image_crop.croppie('result', {
            type: 'canvas',
            size: 'viewport'
        }).then(function(response) {
            $.ajax({
                url:"assets/php/uploadsignature2.php",
                type:"POST",
                data:{"imageupload2": response},
                success:function(data) {
                    $('#uploadimageModal2').modal('hide');
                    $('#uploaded_image2').html(data);
                    $('.hideonupload2').hide();
                    $('.showonupload2').stop(true, true).fadeIn({ duration: 400, queue: false }).css('display', 'block').slideDown({ duration: 300, easing: method, complete: callback});
                }
            })
        })
    })

});

抱歉，如果这是一个愚蠢的问题，我对 JS 还很陌生，这个问题已经困扰了我几个小时......谢谢你的阅读:)

编辑：注释掉 JS 代码的第二部分（从 #close_modal2 开始）将使第一部分工作，但第二部分现在显然不起作用。我还将第二部分中的 reader 变量重命名为“reader2”，但这也没有帮助。

4

0 回答 0