Matas - developer Ответов: 2

Jquery ajax освежает

Привет,

Я создал загрузку файла с помощью ajax, но потом я загружаю файл ajax refresh page и все идет в базу данных, но мне нужно загрузить файл без обновления страницы, где-то есть проблема, и я не вижу, пожалуйста, помогите!


Мой HTML-код:
<pre>  <div class="panel panel-default">
          <div class="panel-body">
            <form id="uploadImage" enctype="multipart/form-data">
              <div class="form-group">
                  <label for="darb_fileUpload">Įkelkite savo pabaigtus darbus</label>
                  <input type="file" name="darb_fileUpload" id="uploadFile">
              </div>
              <div class="form-group">
                <input type="submit" name="submit" value="Įkelti" class="btn btn-info"/>
              </div>
            </form>
              <div class="progress">
                  <div class="progress-bar"></div>
              </div>
              <!-- Display upload status -->
              <div id="uploadStatus"></div>
          </div>
        </div>


AJAX-код :
<pre>$(document).ready(function(){
    // File upload via Ajax
    $("#uploadImage").on('#submit', function(e){
        e.preventDefault();
        $.ajax({
            xhr: function() {
                var xhr = new window.XMLHttpRequest();
                xhr.upload.addEventListener("progress", function(evt) {
                    if (evt.lengthComputable) {
                        var percentComplete = ((evt.loaded / evt.total) * 100);
                        $(".progress-bar").width(percentComplete + '%');
                        $(".progress-bar").html(percentComplete+'%');
                    }
                }, false);
                return xhr;
            },
            type: 'POST',
            url: 'add_darb.php',
            data: 'darb_fileUpload'(this),
            contentType: false,
            cache: false,
            processData:false,
            beforeSend: function(){
                $(".progress-bar").width('0%');
                $('#uploadStatus').html('<img src="images/loading.gif"/>');
            },
            error:function(){
                $('#uploadStatus').html('<p style="color:#EA4335;">File upload failed, please try again.</p>');
            },
            success: function(resp){
                if(resp == 'ok'){
                    $('#uploadImage')[0].reset();
                    $('#uploadStatus').html('<p style="color:#28A74B;">File has uploaded successfully!</p>');
                }else if(resp == 'err'){
                    $('#uploadStatus').html('<p style="color:#EA4335;">Please select a valid file to upload.</p>');
                }
            }
        });
    });

    // File type validation
    $("#uploadFile").change(function(){
        var allowedTypes = ['application/pdf', 'application/msword', 'application/vnd.ms-office', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document', 'image/jpeg', 'image/png', 'image/jpg', 'image/gif'];
        var file = this.files[0];
        var fileType = file.type;
        if(!allowedTypes.includes(fileType)){
            alert('Please select a valid file (PDF/DOC/DOCX/JPEG/JPG/PNG/GIF).');
            $("#uploadFile").val('');
            return false;
        }
    });
});


PHP-код: 
if (!empty($_FILES)) {

    // File upload configuration
    $targetDir = "../uploads/";
    $allowTypes = array('pdf', 'doc', 'docx', 'jpg', 'png', 'jpeg', 'gif');

    $fileName = basename($_FILES['darb_fileUpload']['name']);
    $targetFilePath = $targetDir.$fileName;

    // Check whether file type is valid
    $fileType = pathinfo($targetFilePath, PATHINFO_EXTENSION);
    if (in_array($fileType, $allowTypes)) {
        // Upload file to the server
        if (move_uploaded_file($_FILES['darb_fileUpload']['tmp_name'], $targetFilePath)) {
            $darb_fileUpload = 'ok';
        }
    }
}


Что я уже пробовал:

I have tried a lot of advice online but couldn't resolve this problem.

2 Ответов

Рейтинг:
1

Matthew Dennis

Я думаю, что это так

$("#uploadImage").on('#submit', function(e)

Первый параметр функции on-это имя события, а "#submit" - это не имя события.

Рейтинг:
1

Richard Deeming

Помимо неправильного названия события, на которое указал Мэтью в решении 1, есть еще вот что:

Цитата:
data: 'darb_fileUpload'(this),
Я подозреваю, что это будет синтаксическая ошибка - вы пытаетесь вызвать строку, как если бы это была функция.

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

Если вы хотите отправить загрузку файла через AJAX, вам нужно будет использовать FormData объект:
Использование объектов FormData - веб-API | MDN[^]

Также обратите внимание на документацию jQuery:
.ready() | документация по API jQuery[^]:
jQuery предлагает несколько способов прикрепить функцию, которая будет работать, когда DOM будет готов. Все следующие синтаксисы эквивалентны:
  • $( handler )
  • $( document ).ready( handler )
  • $( "document" ).ready( handler )
  • $( "img" ).ready( handler )
  • $().ready( handler )

Начиная с jQuery 3.0, рекомендуется использовать только первый синтаксис; другие синтаксисы все еще работают, но устарели.
$(function(){
    // File upload via Ajax
    $("#uploadImage").on('submit', function(e){
        e.preventDefault();
        
        $.ajax({
            xhr: function() { ... },
            type: 'POST',
            url: 'add_darb.php',
            data: new FormData(this),
            contentType: false,
            cache: false,
            processData:false,
            beforeSend: function(){ ... },
            error:function(){ ... },
            success: function(resp){ ... }
        });
    });

    // File type validation
    $("#uploadFile").change(function(){ ... });
});