jQuery Progress Bar PHP Upload не отвечает правильно

0

Я использую код выполнения, взятый из (http://theonlytutorials.com/jquery-ajax-file-upload-with-percentage-progress-bar/) (Tweaked для удовлетворения моих потребностей), и он не отвечает правильно. Он загружает и включает данные в базу данных, как должен, но ответ не отправляется (или не принимается) в конце 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 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 name
$name = $_FILES['customerFile']['name'];

// The file 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 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));

Когда я добавляю файл, который он загружает и добавляет в базу данных, но мое сообщение о выполнении пока еще неопределенно говорит "Выполняется загрузка..." и файл, который добавляется. Функция VIA addCustomerFile jQuery имеет каждое поле, возвращенное из AJAX как неопределенное. Только "fileName" (установленное в jQuery) возвращает значение.

Я искал что-нибудь, и ничего не кажется неправильным. Я не знаю javascript. Достаточно, чтобы догадаться и проверить, но этого недостаточно для этого случая (если проблема в javascript). Любая помощь будет оценена по достоинству. заранее спасибо

Неважно, что происходит. Если файл существует, он не будет загружаться, но все равно скажет: "Выполняется загрузка..."... если какая-либо ошибка (например, неправильный формат или размер файла), она все еще говорит "Выполняется загрузка..." навсегда.

Консоль не показывает никаких ошибок или предупреждений или информации о моем javascript (или вообще что-либо)

Теги:
file-upload

1 ответ

0
Лучший ответ

Я решил свой вопрос через час, когда я обрушился на это.

Я забыл поместить 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

  • 0
    Спасибо @ezw. Надеюсь, ты не возражаешь, но я скопировал твою идею! :-)

Ещё вопросы

Сообщество Overcoder
Наверх
Меню