javascript - 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