Question

我正在尝试在POST数据和文件上传到数据库时提示加载gif。我在网上进行了一项研究，我看到了几个与我的问题相关的例子已经解决了，但是当我尝试使用这个Ajax和Jquery代码时，它只是加载了gif并且它一直在旋转。我不知道是否有其他方法可以不使用Ajax而只使用php。

这是我在表单下面尝试的Ajax代码

<div id="loader"></div>
<script src="http://code.jquery.com/jquery.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<script>
var spinner = $('#loader');
$(function() {
  $('form').submit(function(e) {
    e.preventDefault();
    spinner.show();
    $.ajax({
      url: 't2228.php',
      data: $(this).serialize(),
      method: 'post',
      dataType: 'JSON'
    }).done(function(resp) {
      spinner.hide();
      alert(resp.status);
    });
  });
});

和t2228.php文件调用我的php代码

<?php
    include '../lib/session.php'; 
     Session::checkSession();
    include '../config/config.php';
    include '../lib/database.php';
    include '../helpers/format.php';

    $db = new Database();
    $fm = new Format();

    define("DOCROOT", filter_input(INPUT_SERVER, "DOCUMENT_ROOT", FILTER_SANITIZE_STRING));
        $pet = new Pet();
        if($_SERVER['REQUEST_METHOD'] == 'POST' && isset($_POST['submit'])){
        $addPet = $pet->petAdd($_POST, $_FILES);


    }

＆GT;

这是HTML表单

  <form action="" method="post" enctype="multipart/form-data">
        <table class="form">
            <tr>
                <td>
                    <label>Pet Name</label>
                </td>
                <td>
                    <input type="text" name="name" placeholder="Enter Pet Name..." class="medium" />
                </td>
            </tr>
            <tr>
                <td>
                    <label>Pet Price</label>
                </td>
                <td>
                    <input type="text" name="price" placeholder="Enter Pet Price..." class="medium" />
                </td>
            </tr>
            <tr>
                <td>
                    <label>Pet Serie</label>
                </td>
                <td>
                    <input type="text" name="serie" placeholder="Enter Pet Serie..." class="medium" />
                </td>
            </tr>
            <tr>
                <td>
                    <label>Pet Sex</label>
                </td>
                <td>
                    <select id="select" name="sex">
                        <option>Select Pet Sex</option>
                        <option value="Male">Male</option>
                        <option value="Female">Female</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>
                    <label>Pet Age</label>
                </td>
                <td>
                    <input type="text" name="age" placeholder="Enter Pet Age..." class="medium" />
                </td>
            </tr>
            <tr>
                <td>
                    <label>Upload Image</label>
                </td>
                <td>
                    <div class="post-image-collection">
                        <label id="list">

                        </label>
                        <label class="post-image post-image-placeholder mrm mts empty">
                            <input type="file" id="Photofile" name="images[]" required="required" multiple />
                            <span class="icon-camera"><img src="../img/608815-200.png"></span>
                             <p class="uppercase">Photo</p>

                        </label>
                    </div>       
                </td>
            </tr>
            <tr>
                <td></td>
                <td>
                    <input type="submit" name="submit" Value="Add Pet" />
                </td>
            </tr>
        </table>
        </form>

这是我的PHP代码

public function petAdd($data, $file){
    $name = mysqli_real_escape_string($this->db->link, $data['name']);
    $price = mysqli_real_escape_string($this->db->link, $data['price']);
    $serie = mysqli_real_escape_string($this->db->link, $data['serie']);
    $sex = mysqli_real_escape_string($this->db->link, $data['sex']);
    $age = mysqli_real_escape_string($this->db->link, $data['age']);


        foreach($file["images"]["tmp_name"] as $key=>$tmp_name)
        {

            $file_name = $file["images"]["name"][$key];
            $file_size = $file["images"]["size"][$key];
            $file_temp = $file["images"]["tmp_name"][$key];

            $file_size_preview = $_FILES['preview']['size'];

            $div = explode('.', $file_name);
            $file_ext = strtolower(end($div));
            $permited  = array('jpg', 'jpeg', 'png', 'gif');

            if($tmp_name == ""){
                $msg = "<span class='error'>Fields must not be empty!</span>";
                return $msg;
            } 
            elseif ($file_size > 1048567 || $file_size_preview > 1048567) {
                $msg = "<span class='error'>Image Size should be less then 1MB! </span>";
                return $msg;
            }
            elseif (in_array($file_ext, $permited) === false) {
                $msg = "<span class='error'>You can upload only:-".implode(', ', $permited)."</span>";
                return $msg;
            }
        }

         if($name == "" || $price == "" || $serie == "" || $sex == "" || $age == "") {

                $msg = "<span class='error'>Fields must not be empty!</span>";
                return $msg;
        } else{

        $query = "INSERT INTO pets(name, price, serie, sex, age, status, details, shipping, type) VALUES('$name','$price','$serie', '$sex', '$age','$status', '$details','$shipping','$type')";
                $inserted_row = $this->db->insert($query);
                $last_id = $this->db->link->insert_id;

            foreach($file["images"]["tmp_name"] as $key=>$tmp_name)
            {

                $div = explode('.', $file_name);
                $file_ext = strtolower(end($div));
                $unique_image = substr(md5(time()), 0, 10).'.'.$file_ext;
                $uploaded_image = "../uploads/".$unique_image;

                $saveToFolder = DOCROOT . "/dallasfrenchies/uploads/$unique_image";
                $saveToDatabase = "uploads/$unique_image";
                move_uploaded_file($tmp_name, $saveToFolder);
                $query = "INSERT INTO images(petId, path) VALUES('$last_id','$saveToDatabase')";
                $this->db->insert($query);
                sleep(3);

            }

            $msg = "<span class='success'> Your Pet has been added Successfully. </span>";
                return $msg;
        }
    }

是否有人建议修改或添加内容？

Answer 1

尝试下面的代码并在ajax代码中进行一些更改。在代码中添加以下参数。

processData：false， contentType：false，

在ajax启动之前添加 var formData = new FormData（$（this））; 行。

或检查以下代码并根据您的代码进行更改。

<script type="text/javascript">
    $('form').submit(function (e) {
        e.preventDefault();
        var spinner = $('#loader');
        var formData = new FormData($(this));
        $.ajax({
            url: 't2228.php',
            type: "POST",
            data: formData,
            processData: false,
            contentType: false,
            beforeSend: function () {
                spinner.show();
            },
            success: function (data)
            {
                spinner.hide();
            },
            error: function (resp) {
                spinner.hide();
                alert(resp);
            }
        });
    });
</script>

Answer 2

<div id="loader"></div>
<script src="http://code.jquery.com/jquery.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<script>
var spinner = $('#loader');
$(function() {
  $('form').submit(function(e) {
    e.preventDefault();
    spinner.show();
    $.ajax({
      url: 't2228.php',
      data: $(this).serialize(),
      method: 'post',
      dataType: 'JSON',
      success: function(resp) {
        spinner.hide();
        alert(resp.status);
      },
      error: function(resp) {
        spinner.hide();
        alert(resp);
      }
    })
  });
});

而不是.done（）我使用了成功和错误的属性

将文件上传到数据库时加载gif

2 个答案: