AJAX и PHP: загрузка файла

Пример того как осуществить загрузку файла через PHP и jQuery ajax.

Для начала необходимо создать HTML элемент для загрузки файла.

<input id="sortpicture" type="file" name="sortpic" />
<button id="upload">Upload</button>

Далее необходимо дописать JS код:

$('#upload').on('click', function() {
    var file_data = $('#sortpicture').prop('files')[0];
    var form_data = new FormData();
    form_data.append('file', file_data);
    alert(form_data);
    $.ajax({
                url: 'upload.php',
                dataType: 'text',
                cache: false,
                contentType: false,
                processData: false,
                data: form_data,
                type: 'post',
                success: function(php_script_response){
                    alert(php_script_response);
                }
     });
});

Теперь приступим к PHP скрипту, где загрузим файл на сервер.

upload.php:

<?php

    if ( 0 < $_FILES['file']['error'] ) {
        echo 'Error: ' . $_FILES['file']['error'] . '
';
    }
    else {
        move_uploaded_file($_FILES['file']['tmp_name'], 'uploads/' . $_FILES['file']['name']);
    }

?>

Несколько слов о каталоге, в который загружается файл:

  1. Убедитесь, что путь к каталогу верен
  2. Каталог должен быть доступен для записи.

Пару слов о PHP функции move_uploaded_file, которая используется в upload.php:

move_uploaded_file(

    // временное расположение файла
    $_FILES['file']['tmp_name'],

    // конечный путь к файлу и его название
    'uploads/' . $_FILES['file']['name']
);

$_FILES['file']['name'] — изначальное имя файла. Можете задать своё название:

move_uploaded_file(
    $_FILES['file']['tmp_name'],
    'uploads/my_new_filename.whatever'
);

Также стоит убедиться что в конфигурационных настройках PHP, значения upload_max_filesize и post_max_size соответствуют вашим требованиям.

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: https://stackoverflow.com/questions/23980733/jquery-ajax-file-upload-php
Перевел: Станислав Протасевич
Урок создан: 24 Мая 2017
Просмотров: 66690
Правила перепечатки

5 последних уроков рубрики "jQuery"

^ Наверх ^