Почему нельзя загрузить фото через AJAX на сервер NGINX?

Ссылка скопирована
JavaScript Nginx PHP
27 марта 2026 1 ответ

Настройки сервера:

server {   listen 80 default_server;  listen [::]:80 default_server;   root /var/www/html;   index index.php index.html index.htm index.nginx-debian.html;   server_name _;   location / {     try_files $uri $uri/ =404;  }    location ~ .php$ {    include snippets/fastcgi-php.conf;      fastcgi_pass unix:/run/php/php8.1-fpm.sock;   }  rewrite ^/product/([a-zA-Z0-9_-]+)$  /product.php last; rewrite ^/ajax/upload/logoshop/   /scroll.php last;     location ~* .(jpg|jpeg|png|gif|css|js|ico|json|xml|woff|woff2|webp|svg)$  { expires 2147483647s; add_header Cache-Control "public,max-age=2147483647"; access_log off; }     location ~ /.ht {    deny all;   } }

server { listen 80 default_server; listen [::]:80 default_server; root /var/www/html; index index.php index.html index.htm index.nginx-debian.html; server_name _; location / { try_files $uri $uri/ =404; } location ~ .php$ { include snippets/fastcgi-php.conf; fastcgi_pass unix:/run/php/php8.1-fpm.sock; } rewrite ^/product/([a-zA-Z0-9_-]+)$ /product.php last; rewrite ^/ajax/upload/logoshop/ /scroll.php last; location ~* .(jpg|jpeg|png|gif|css|js|ico|json|xml|woff|woff2|webp|svg)$ { expires 2147483647s; add_header Cache-Control "public,max-age=2147483647"; access_log off; } location ~ /.ht { deny all; } }

Файл отправляю через AJAX:

<script> $(document).ready(function(){  $(document).on('change', '#file', function(){   var name = document.getElementById("file").files[0].name;   var form_data = new FormData();   var ext = name.split('.').pop().toLowerCase();   if(jQuery.inArray(ext, ['gif','png','jpg','jpeg']) == -1)   {    alert("Invalid Image File");   }   var oFReader = new FileReader();   oFReader.readAsDataURL(document.getElementById("file").files[0]);   var f = document.getElementById("file").files[0];   var fsize = f.size||f.fileSize;   if(fsize > 2000000)   {    alert("Image File Size is very big");   }   else   {    form_data.append("file", document.getElementById('file').files[0]);    $.ajax({     url:"http://localhost/ajax/upload/logoshop/",     method:"POST",     data: form_data,     contentType: false,     cache: false,     processData: false,     beforeSend:function(){      $('#userimage').html("<img style='max-width:70px!important;max-height:70px!important;min-width:70px!important;min-height:70px!important;' src=''>");     },     success:function(data)     {      $('#userimage').html(data);     }    });   }  }); });  </script>

<script> $(document).ready(function(){ $(document).on('change', '#file', function(){ var name = document.getElementById("file").files[0].name; var form_data = new FormData(); var ext = name.split('.').pop().toLowerCase(); if(jQuery.inArray(ext, ['gif','png','jpg','jpeg']) == -1) { alert("Invalid Image File"); } var oFReader = new FileReader(); oFReader.readAsDataURL(document.getElementById("file").files[0]); var f = document.getElementById("file").files[0]; var fsize = f.size||f.fileSize; if(fsize > 2000000) { alert("Image File Size is very big"); } else { form_data.append("file", document.getElementById('file').files[0]); $.ajax({ url:"http://localhost/ajax/upload/logoshop/", method:"POST", data: form_data, contentType: false, cache: false, processData: false, beforeSend:function(){ $('#userimage').html("<img style='max-width:70px!important;max-height:70px!important;min-width:70px!important;min-height:70px!important;' src=''>"); }, success:function(data) { $('#userimage').html(data); } }); } }); }); </script>

На этот php скрипт:

<?php $uniquecalue = uniqid();  if($_FILES["file"]["name"] != '') {  $test = explode('.', $_FILES["file"]["name"]);  $ext = end($test);  $name =  $uniquecalue . '.' . $ext;  $location = '/upload/' . $name;  move_uploaded_file($_FILES["file"]["tmp_name"], $location);  echo '<img src="'.$location.'"/>'; } ?>

<?php $uniquecalue = uniqid(); if($_FILES["file"]["name"] != '') { $test = explode('.', $_FILES["file"]["name"]); $ext = end($test); $name = $uniquecalue . '.' . $ext; $location = '/upload/' . $name; move_uploaded_file($_FILES["file"]["tmp_name"], $location); echo '<img src="'.$location.'"/>'; } ?>

Код работает на Apache, но не работает на NGINX. В чем может быть проблема?

Дополнительно:

Я думаю что слова «не работает» здесь не подходят. Таких слов в айти вообще нет. И в вашем случае nginx так или иначе вам сообщает что происходит либо через код ответа, либо в логах

  • Дмитрий, спасибо, посмотрел и все сделал)

    • 1, Надо изменить права доступа к каталогу: 

    sudo chown -R www-data:www-data /var/www/html/upload/

    sudo chown -R www-data:www-data /var/www/html/upload/

    2. Изменить путь загрузки файла:

    <?php  $location = '/var/www/html/upload/' . $name;

    <?php $location = '/var/www/html/upload/' . $name;

    Нужно решить такую задачу?

    Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

    Заказать помощь
    Лучший ответ
    1
    Ирина WP Ответ

    Для того чтобы загрузить фото через AJAX на сервер NGINX, необходимо учитывать несколько возможных причин, по которым загрузка может не работать. Вот несколько возможных причин и способы их решения:

    1. Неправильная конфигурация сервера NGINX: Убедитесь, что в конфигурационном файле NGINX правильно настроены параметры для загрузки файлов. Вам может потребоваться добавить директиву `client_max_body_size` в секцию `http`, чтобы увеличить максимальный размер загружаемого файла. Например:

       http {
       client_max_body_size 20M;
   }

    http { client_max_body_size 20M; }

    2. Неправильная обработка запроса на сервере: Убедитесь, что ваш сервер правильно обрабатывает AJAX-запросы. Вам может потребоваться добавить соответствующие заголовки в вашем коде сервера, чтобы разрешить кросс-доменные запросы. Например, для PHP можно добавить следующий код в начале скрипта:

       header("Access-Control-Allow-Origin: *");
   header("Access-Control-Allow-Methods: POST");
   header("Access-Control-Max-Age: 3600");
   header("Access-Control-Allow-Headers: Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With");

    header("Access-Control-Allow-Origin: *"); header("Access-Control-Allow-Methods: POST"); header("Access-Control-Max-Age: 3600"); header("Access-Control-Allow-Headers: Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With");

    3. Проблемы с разрешениями доступа к папке загрузки: Убедитесь, что папка, в которую вы пытаетесь загрузить файл, имеет правильные разрешения доступа для записи. Папка должна иметь права 755 или 777 в зависимости от конфигурации вашего сервера.

    4. Проблемы с форматом передаваемых данных: Убедитесь, что вы правильно передаете данные при помощи AJAX-запроса. Удостоверьтесь, что вы используете правильный тип `enctype` в форме и правильно обрабатываете данные на стороне сервера.

    Если после выполнения вышеперечисленных шагов проблема с загрузкой фото через AJAX на сервер NGINX все еще не решена, попробуйте проверить логи сервера на наличие ошибок и сообщений об ошибках, которые могут помочь вам выявить причину проблемы.

    Другие ответы (0)

    Пока нет других ответов. Будьте первым, кто поможет автору.

    Ответить на вопрос

    комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *

    Вам также может быть интересно

    VPN Как правильно настроить vless для Android TV? 0 ответов Pyrogram Как правильно зарегистрировать юзер бота в Telegram? 0 ответов печатные-платы Как заставить запускаться программу M3.exe от компании Hanxing AOI в инспекционной машине на Windows 7 Pro? 0 ответов Аккумуляторные батареи Почему при зарядке автостарта слышен писк, где искать причину? 0 ответов