javascript - jQuery Ajax 表单在一个表单中包含两个提交按钮

标签 javascript php jquery ajax forms

我在一种表单中有 2 个按钮。当我单击第一个或第二个按钮时,两者都会写入示例警报,但 Ajax 请求不会运行。我需要一个表格,因为我想上传图像。不知道是什么问题。

页面.php

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>jQuery Ajax two submit in one form</title>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>
<body>

<form id="animal-upload" method="post" enctype="multipart/form-data">

    <span>Name:</span>
    <input type="text" name="animalname" id="animalname">

    <span>Image:</span>
    <input type="file" name="imagefile" id="imagefile">

    <button type="submit" name="publish" id="publish">Publish</button>
    <button type="submit" name="save" id="save">Save</button>

</form>

<script>

$(document).ready(function() {

$('#animal-upload').on('submit', function() {

    return false;

});

$('#publish').click(function() {

    alert("Test");

});

$('#save').click(function(e) {

    e.preventDefault();

    $.ajax({

        url: "animal-upload.php",
        type: "POST",
        data: new FormData(this),
        contentType: false,
        processData: false,
        success: function(data) {

            alert(data);

        }

    });

});

});

</script>

</body>
</html>

动物上传.php

<?php

$connect = mysqli_connect("localhost", "root", "", "test");

mysqli_set_charset($connect,"utf8");

$status = '';

$animalname = $connect->real_escape_string($_POST["animalname"]);

if ($_FILES['imagefile']['name'] != '') {

    $extension = end(explode(".", $_FILES['imagefile']['name']));
    $allowed_type = array("jpg", "jpeg", "png");

    if (in_array($extension, $allowed_type)) {

        $new_name = rand() . "." . $extension;
        $path = "animals/" . $new_name;

        if (move_uploaded_file($_FILES['imagefile']['tmp_name'], $path)) {

            mysqli_query($connect, "INSERT INTO animals (animalname,image) VALUES ('".$animalname."','".$path."')");

            $status = 'Successful!';

        }

    } else {

        $status = 'This is not image file!';

    }

} else {

    $status = 'Please select image!';

}

echo $status;

?>

最佳答案

经过反复试验,我发现如果您更改此行,脚本就可以工作:

data: new FormData($("#animal-upload")[0]),

因为选择了表单对象。

您可以考虑一些安全提示:

  • 请勿公​​开泄露您的密码
  • 不要让您的数据库用户在没有密码的情况下进行连接
  • 为从 PHP 脚本连接到数据库的目的而设置严格的最小权限的用户(称为最小权限原则)
  • 重命名您上传的文件

要使文件上传正常工作:

  • 确保您对所指向的目录拥有正确的权限 php.ini 文件中的 upload_tmp_dir
  • 您可能还需要检查您的文件大小是否也没有超过 memmory_limit 指令

祝你好运

关于javascript - jQuery Ajax 表单在一个表单中包含两个提交按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45113677/

相关文章:

jquery - 如何将悬停更改为单击事件?

javascript - jQuery :disabled selector not working properly?

javascript - 为什么我的 javascript 拖动调整框不能按预期工作

javascript - 将变量传递到 Angular-ui 模态中

JavaScript 非正则表达式替换

php - Zend 框架 : What are the differences between init() and preDispatch() functions in controller objects?

javascript - .then 中嵌套的 Promise 在第一个 Promise Node 之前运行

php SOAP 响应为空,但__last_response不是

php - 当没有标签时如何隐藏标签容器?

Jquery 自动完成最小长度