Javascript jQuery进度条PHP上载未正确响应

我正在使用取自（）的进度条形码（经过调整以满足我的需要），但它没有正确响应。它会像应该的那样上传数据并将其包含到数据库中，但是jQuery端没有发送（或接收）响应

我的Javascript

function addCustomerFile(fileID, filePath, fileName, file)
{
    $("#customerFiles").append('<tr class="border-bottom"><td class="col-1 text-right border-right p-1">' + fileID + '</td><td><a href="' + filePath + '" class="d-block p-1">' + fileName + ' ' + file + '</a></td><td class="col-1 border-left p-1 pr-3"><div class="clearfix no-underline"><div><a href="?m=5&delFile=' + fileID + '" class="removeImg right block-24">&nbsp;</a></div><div><a href="downloads.php?file=' + fileID + '" class="downloadImg right block-24 mr-2">&nbsp;</a></div></div></td></tr>');
}

$(function ()
{
    $('#btn').click(function ()
    {
        $('.myprogress').css('width', '0');
        $('.msg').text('');

        var fileName = $('#fileName').val();
        var customerFile = $('#customerFile').val();
        var customerID = $('#customerID').val();

        if (fileName == '' || customerFile == '')
        {
            alert('Please enter file name and select file');
            return;
        }

        var formData = new FormData();

        formData.append('customerFile', $('#customerFile')[0].files[0]);
        formData.append('fileName', fileName);
        formData.append('customerID', customerID);

        $('#btn').attr('disabled', 'disabled');
        $('.msg').text('Uploading in progress...');

        $.ajax(
        {
            url: 'process/uploadCustomerFile.php',
            data: formData,
            processData: false,
            contentType: false,
            type: 'POST',

            // The progress bar
            xhr: function ()
            {
                var xhr = new window.XMLHttpRequest();

                xhr.upload.addEventListener("progress", function (evt)
                {
                    if (evt.lengthComputable)
                    {
                        $('.progress').removeClass('invisible');

                        var percentComplete = evt.loaded / evt.total;

                        percentComplete = parseInt(percentComplete * 100);

                        $('.myprogress').text(percentComplete + '%');
                        $('.myprogress').css('width', percentComplete + '%');
                    }
                }, false);

                return xhr;
            },

            success: function (data)
            {
                $('.msg').text(data.responseText);
                $('#btn').removeAttr('disabled');

                addCustomerFile(data.fileID, data.filePath, fileName, data.fileNameExt);
            }
        });
    });
});

函数addCustomerFile（文件ID、文件路径、文件名、文件名）
{
$（“#customerFiles”）.append（“”+fileID+“”）；
}
$（函数（）
{
$（'#btn'）。单击（函数（）
{
$（'.myprogress'）.css（'width'，'0'）；
$（'.msg'）.text（''）；
var fileName=$（'#fileName'）.val（）；
var customerFile=$（'#customerFile'）.val（）；
var customerID=$（'#customerID'）.val（）；
如果（文件名=“”| |自定义文件=“”）
{
警报（'请输入文件名并选择文件'）；
返回；
}
var formData=new formData（）；
formData.append（'customerFile'，$（'#customerFile'）[0]。文件[0]）；
append（'fileName'，fileName）；
formData.append（'customerID'，customerID）；
$（'#btn'）.attr（'disabled'，'disabled'）；
$（'.msg'）.text（'正在上载…'）；
$.ajax(
{
url:'process/uploadCustomerFile.php'，
数据：formData，
processData:false，
contentType:false，
键入：“POST”，
//进度条
xhr：函数（）
{
var xhr=new window.XMLHttpRequest（）；
xhr.upload.addEventListener（“进度”，函数（evt）
{
if（evt.长度可计算）
{
$（'.progress'）.removeClass（'不可见'）；
var percentComplete=evt.loaded/evt.total；
percentComplete=parseInt（percentComplete*100）；
$（'.myprogress'）.text（完成百分比+'%'）；
$（'.myprogress'）.css（'width'，percentComplete+'%'）；
}
}，假）；
返回xhr；
},
成功：功能（数据）
{
$（'.msg'）.text（data.responseText）；
$（'btn'）.removeAttr（'disabled'）；
addCustomerFile（data.fileID、data.filePath、fileName、data.fileNameExt）；
}
});
});
});

我的HTML

<div class="form-group">
    <div class="progress invisible">
        <div class="progress-bar progress-bar-success myprogress" role="progressbar" style="width:0%">0%</div>
    </div>

    <div class="msg"></div>
</div>
<input type="hidden" id="customerID" value="{{customer.ID}}" />
<div class="form-group">
    <label for="fileName">File name: </label>
    <input type="text" class="form-control" id="fileName" /> 
</div>
<div class="form-group">
    <label>File: </label>
    <input type="file" class="form-control" id="customerFile" />
</div>
<input type="button" id="btn" class="btn btn-info" value="Upload" />

0%
文件名：
文件：

我的PHP

<?php
// Security (Making sure we can indirectly access certain components)
define('SIDING', true);
define('ADMIN', true);
define('HELPER', true);

// Including our common component (Needs to be included before any programming)
require '../../components/common.php';

// Making sure the user is allowed to be here, otherwise redirecting the user back to site's homepage
if(!isset($ses->logged->permissions->ADMIN))
{
    // Redirecting the user to
    header("LOCATION: ../index.php");
}

// Maximum file size (15 MB)
$maxSize = 15 * 1024 * 1024;

// File upload path
$path = "../../design/{$tpl->style}/customerFiles/";

// Set the valid file extensions
$validFormats = array("jpg", "png", "gif", "bmp", "jpeg", "GIF", "JPG", "PNG", "doc", "txt", "docx", "pdf", "xls", "xlsx");

// The file's name
$name = $_FILES['customerFile']['name'];

// The file's size
$size = $_FILES['customerFile']['size'];

// Check if the file is selected or cancelled after pressing the browse button.
if(!strlen($name))
{
    die(json_encode(array('responseType' => 0, 'responseText' => "Please select a file...")));
}

// Extract the name and extension of the file
list($txt, $ext) = explode(".", $name);

// If the file is valid go on.
if(!in_array($ext, $validFormats))
{
    die(json_encode(array('responseType' => 0, 'responseText' => "Invalid file format...")));
}

// Check if the file size is more than 2 mb
if($size > $maxSize)
{
    die(json_encode(array('responseText' => "File size max 15 MB")));
}

$fileName = $_POST['fileName'];

$customerID = $_POST['customerID'];

$tmp = $_FILES['customerFile']['tmp_name'];

// The file's name
$fileRealName = $fileName . '_' . $customerID . '.' . $ext;

// The filepath where we are uploading the file
$filePath = $path . $fileRealName;

// Our SQL to check if the file exists in the database
$sql = "SELECT ID FROM " . CUSTFILES_TABLE . " WHERE customerID = :customerID AND fileName = :fileName AND file = :file";

$stmt = $db->prepare($sql);

$stmt->bindParam(":customerID", $customerID, PDO::PARAM_INT);
$stmt->bindParam(":fileName", $fileName, PDO::PARAM_STR);
$stmt->bindParam(":file", $fileRealName, PDO::PARAM_STR);

$stmt->execute();

$selectFile = $stmt->fetch();

// Checking if the file already exists
if(file_exists($filePath) && $selectFile)
{
    die(json_encode(array('responseText' => "This file already exists for the customer")));
}

// Turning off auto-commit
$db->beginTransaction();

// SQL to insert the new uploaded file into the database
$sql = "INSERT INTO " . CUSTFILES_TABLE . " (customerID, fileName, file) VALUES (:customerID, :fileName, :file)";

$stmt = $db->prepare($sql);

$stmt->bindParam(":customerID", $customerID, PDO::PARAM_INT);
$stmt->bindParam(":fileName", $fileName, PDO::PARAM_STR);
$stmt->bindParam(":file", $fileRealName, PDO::PARAM_STR);

// Adding the data to the database
if(!$stmt->execute())
{
    die(json_encode(array('responseText' => "File failed to be added to the database")));
}

// Check if it the file move successfully.
if(!move_uploaded_file($tmp, $filePath))
{
    // Rolling back any changes since there were errors
    $db->rollBack();

    die(json_encode(array('responseText' => "The file failed to be uploaded")));
}

// Committing the changes
$db->commit();

// Getting the ID of the inserted literature
$id = $db->lastInsertId();

// Creating the response for the process
$jsonReply = array(
    'fileID'        => $id,
    'filePath'      => $filePath,
    'fileRealName'  => $fileRealName,
    'responseText'  => "File has being uploaded successfully!"
);

die(json_encode($jsonReply));

---

我为此伤了一个小时的脑筋，终于解决了我的问题

我忘了在我的AJAX调用中添加数据类型：“json”

url: 'process/uploadCustomerFile.php',
data: formData,
dataType: 'json', // <-- This is what I forgot to add
processData: false,
contentType: false,
type: 'POST',

url:'process/uploadCustomerFile.php'，
数据：formData，
数据类型：“json”，//谢谢@ezw我希望你不介意，但我复制了你的想法！：-）