Question

我有一个带文件上传的表单。我想执行两个任务：一个是数据提交到数据库并通过ajax上传文件和ajax成功后另一个将形成action.ajax工作正常但是在ajax成功表单操作不起作用请帮助

main.php

<!doctype html>
<html>
    <head>
        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

        <!-- Optional theme -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

        <!-- Latest compiled and minified JavaScript -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

        <script type="text/javascript">
            function mycall() {

                //disable the default form submission
                event.preventDefault();

                //grab all form data  
                var formData = new FormData(document.getElementById('data'));

                $.ajax({
                    url: 'addToMySQL.php',
                    type: 'POST',
                    data: formData,
                    async: false,
                    cache: false,
                    contentType: false,
                    processData: false,
                    success: function (returndata) {
                       alert(returndata);
                    }
                });

                return false;
            }
        </script> 
    </head>
    <body>
        <form method='post' enctype="multipart/form-data" id="data" action="try.php" >
            <div class="form-input">
                <label for="exampleSelect1" class="col-md-3 control-label">Type of Paper</label>
                <div class="col-md-9">
                    <select class="form-control"  id="Otop" name="Otop" required>
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                        <option value="5">5</option>
                    </select>
                </div>
            </div>

            <div class="col-md-12">
                <div class="form-input">
                    <label for="exampleSelect1" class="col-md-3 control-label">Paper upload</label>
                    <div class="col-md-9">
                        <input type="file" id="file" name="profileImg" >
                    </div>
                </div>
            </div>
            <div class="form-input">
                <div class="col-sm-12">
                    <input type="submit" class="btn btn-primary btn-lg btn-block" onclick="mycall()" name="OrderSubmit" value="Order">
                </div>
            </div>
        </form>
    </body>
</html>

addToMySQL.php

<?php 
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);
include("dbconfig.php");
include('class/userClass.php');

$userClass = new userClass();

$Otop           = $_POST['Otop'];
$Odiscipline    = $_FILES['profileImg']['name']; 

$target         = "uploads/";       
$fileTarget     = $target.$Odiscipline; 

$result         = move_uploaded_file($_FILES['profileImg']['tmp_name'], "uploads/".$_FILES['profileImg']['name']);

$id             = $userClass->userOrderInfo($Otop,$Odiscipline, $fileTarget);

if ($id) {
    echo "done";
} else {
    echo "Notdone";
}

userClass.php中的userOrderInfo功能

/* User Payment */
     public function userOrderInfo($Otop, $Odiscipline, $fileTarget)
     {
          try {
              $db = getDB();

              $stmt = $db->prepare("INSERT INTO orderinfo(Otop, Odiscipline, fileTarget) VALUES (:Otop, :Odiscipline, :fileTarget)");  
              $stmt->bindParam("Odiscipline", $Odiscipline) ;
              $stmt->bindParam("Otop", $Otop) ;
              $stmt->bindParam("fileTarget", $fileTarget) ;
              $stmt->execute();
              $db = null;

              return true;

          } catch(PDOException $e) {
              echo '{"error":{"text":'. $e->getMessage() .'}}'; 
          }
     }

Answer 1

好的，要明白这一点，你的代码正在做的是：

表单已填写，您点击“提交”即可阻止表单提交的默认操作。相反，这采取的形式数据并通过ajax将其提交到addToMySQL.php
addToMySQL.php然后处理文件上传并在userOrderInfo()上调用userClass.php
userOrderInfo将返回(string)或(boolean) true这两者，对于true语句，PHP将视为if()。
addToMySQL.php会将(string) "done"的回复返回给main.php
ajax电话main.php接受addToMySQL.php的回复，并触发内容为"done"的javascript警报。

由于编写这种方式，表单永远不会使用它的action属性，而是会不断尝试将表单内容添加到addToMySQL.php，因为您使用的是event.preventDefault();。< / p>

<强>解决方案

快速解决方案是将javascript重定向添加到ajax成功方法，或者将隐藏的<form>添加到您要发送给用户的操作中，然后填充并使用javascript将其发送到文件已上传。

无论您决定采用何种方式，我都建议您修复addToMySQL.php，以便不会经常发回"done"！

ajax成功后，表格行动无效

1 个答案: