jQuery 進度條 PHP 上傳沒有正確響應

Question

我正在使用取自 ( http://theonlytutorials.com/jquery-ajax-file-upload-with-percentage-progress-bar/ ) 的進度條碼（根據我的需要進行了調整），但它沒有正確響應。 它像它應該的那樣上傳數據並將其包含到數據庫中，但在 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);
            }
        });
    });
});

我的 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" />

我的 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));

當我添加它上傳的文件並將其添加到數據庫中時，但我的進度條消息仍然無限期地顯示“正在上傳...”並且通過 addCustomerFile jQuery 函數附加的文件將從 AJAX 返回的每個字段都設為未定義。 只有 'fileName'（在 jQuery 中設置）返回一個值。

我已經尋找過任何東西，似乎沒有任何問題。 我不知道javascript。 足以猜測和檢查，但對於這種情況似乎還不夠（如果問題是 javascript）。 任何幫助，將不勝感激。 提前致謝

發生什么並不重要。 如果文件存在，則不會上傳但仍會顯示“正在上傳...”...如果發生任何錯誤（如格式錯誤或文件大小錯誤），它仍會永遠顯示“正在上傳...”。

控制台不顯示任何錯誤或警告或有關我的 javascript（或任何內容）的任何信息

Answer 1

經過一個小時的思考，我解決了我的問題。

我忘了把 dataType: 'json' 放到我的 AJAX 調用中。

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

所以響應不被視為 JSON