Question

我有一个表单和一个输入类型文件。

manifest.json

每当我在输入文件中附加图像时它就会执行，而ajax会处理它以自动提交它并将其保存到数据库中。

<form id='imageform' method='post' enctype='multipart/form-data' action='php/exec/add-message-image-exec.php' style='clear:both'>
    <div id='imageloadstatus' style='display:none'><img src='assets/loader.gif' alt='Uploading....'/></div>
    <div id='imageloadbutton'>
        <div class='file-field input-field'>
            <div class='btn'>
                <span>Upload</span>
                <input type='file' name='file' id='photoimg'/>
            </div>
            <div class='file-path-wrapper'>
                <input class='file-path validate' type='text'>
            </div>
        </div>
    </div>
</form>

我的问题是它将图像提交两次并将其保存到我的数据库/表中两次。但是当我删除我脚本中的$(document).ready(function () { $('#photoimg').on('change', function () { var A = $('#imageloadstatus'); var B = $('#imageloadbutton'); $('#imageform').ajaxSubmit({target: '#preview', beforeSubmit: function () { A.show(); B.hide(); }, success: function () { A.hide(); B.show(); }, error: function () { A.hide(); B.show(); }}).submit(); }); });时，它只执行一次但是有一个类似模态的小窗口，每当我附加图像/提交时都会出现另一个屏幕。

Answer 1

删除'action'并将其放入ajax POST请求中。

$(document).ready(function () {
  $('#photoimg').on('change', function () {
    var A = $('#imageloadstatus');
    var B = $('#imageloadbutton');

    $.ajax({
        url: 'php/exec/add-message-image-exec.php',
        type: 'POST',
        data: $('#imageform').serialize(),
        beforeSubmit: function () {
            A.show();
            B.hide();
        },
        success: function (data) {
            //do something with data
            //ex: console.log()
            console.log(data);
            A.hide();
            B.show();
        },
        error: function () {
            A.hide();
            B.show();
        }
    });
  });
});

ajaxSubmit：数据库上的重复条目

1 个答案: