0

更新

上下文：我有一个正在编辑事件数据的表单：事件照片、标题、描述等。当用户打开编辑表单时，所有数据都在表单字段中。用户可以选择编辑数据并更新，或不进行。

问题：如果用户没有更改照片并按下“提交”，照片就会消失。

期望结果：如果用户选择更改照片，我希望更新照片，如果用户不更改照片，我希望保留现有照片。

** 更新** 我以前认为这是一个 PHP isset() / empty() 检查，但事实并非如此。这是一个javascript问题，我没有经验。我相信提交按钮和提交 id 会导致 javascript 触发，而不管 php.ini 是什么。

HTML图像输入表单的代码。

     <div class="row">
            <div class="col-md-12">
                <div id="event_picture" style="width:350px"></div>
            </div>
            <div class="col-md-12" style="padding-top:30px;">
                <strong>Select Image:</strong>
                <br/>
                <img width='100' src="images/<?php echo $e['event_picture'];?>" alt="">
                <input type="file" id="upload" class="form">
                <br/>
                <input type="hidden" name="event_picture" id="event_picture_base64">
            </div>
        </div>

提交按钮

 <input type="submit" name="submit" class="upload-result" value="Update Event" class="btn btn-primary btn-lg">

JAVASCRIPT

 <script type="text/javascript">
$uploadCrop = $('#event_picture').croppie({
    enableExif: true,
    viewport: {
        width: 300,
        height: 300,
        type: 'square'
    },
    boundary: {
        width: 350,
        height: 350
    }
});


$('#upload').on('change', function () { 
    var reader = new FileReader();
    reader.onload = function (e) {
        $uploadCrop.croppie('bind', {
            url: e.target.result
        }).then(function(){
            console.log('jQuery bind complete');
        });

    }
    reader.readAsDataURL(this.files[0]);
});


$('.upload-result').on('click', function (ev) {
    $uploadCrop.croppie('result', {
        type: 'canvas',
        size: 'viewport'
    }).then(function (resp) {

        document.getElementById("event_picture_base64").value = resp;
    });
});


</script>

我认为问题是我需要一个条件来防止在我按下提交按钮时触发 javascript。我现在正在网上搜索，但我真的不知道如何写那个条件。

任何帮助表示赞赏。

4

0 回答 0