Загрузка изображений без обновления и смены фона

Question

Хорошо, я уже несколько недель ищу ответ.

Отказ от ответственности

Я новичок в веб-разработке и изучил все самостоятельно.Иногда я застреваю, но я никогда не застревал раньше.

Проблема

Я хочу, чтобы на моем сайте была кнопка Загрузить, которая автоматически загружает изображение в папку и меняет фонизображение той же страницы без перенаправления.Путь этого изображения будет сохранен в файле cookie, который пользователь будет загружать при каждом доступе к странице, и то же изображение будет загружаться в качестве фонового изображения.Точно так же, как Google делает на своей стандартной вкладке в правой нижней части экрана.

Я исследовал и, очевидно, AJAX идеально подходит для этого сценария, поскольку он позволяет JQuery опосредовать файл php.Однако я не могу понять, как использовать его так, как мне нужно.

Это то, что у меня есть для кнопки, файла php и функции JJuery AJAX:

Код, который я простопоказал, что вы не работаете.

index.php

    <form method="post" enctype="multipart/form-data" action="upload.php" id="file_uploader">
    <div class="upload-btn-wrapper">
    <button  class="btn">Upload</button>
    <input  id="image_upload" type="file" name="file"/>  
    <button type="submit" value="Submit" class="btn" style="visibility:none;"></button> 
    </div>                                                                                       
    </form>

.js

    $(document).ready(function (e){
    $("#uploadForm").on('submit',(function(e){
    e.preventDefault();
    $.ajax({
    url: "upload.php",
    type: "POST",
    data: { imageurl : $final,},
    dataType: 'json',
    contentType: false,
    cache: false,
    processData:false,
    success: function(result) {
    alert($final);
    document.body.style.backgroundImage = $final;
    },
    error: function(){}             
    });
    }));
    });

.php

    if(isset($_FILES['userImage'])){
      $errors= array();
      $file_name = $_FILES['userImage']['name'];
      $file_size =$_FILES['userImage']['size'];
      $file_tmp =$_FILES['userImage']['tmp_name'];
      $file_type=$_FILES['userImage']['type'];
      $file_ext=strtolower(end(explode('.',$file_name)));

      $extensions= array("jpeg","jpg","png");

      if(in_array($file_ext,$extensions)=== false){
         $errors[]="extension not allowed, please choose a JPEG or PNG file.";
      }

      $final = "url(Uploads/".$file_name.")";

      if(empty($errors)==true){
         move_uploaded_file($file_tmp,"Uploads/".$file_name);
         echo "Success";
      }else{
         print_r($errors);
      }
   }

Потому чтоЯ использую XAMPP для тестирования перед фиксацией, он еще не работает, но даже изображение не меняется.

Answer 1

Я заметил, что некоторые из ваших идентификаторов, на которые вы ссылаетесь в своем файле JS, не соответствуют вашему HTML-коду.

// Original
$('#uploadForm').on('submit', function(e) { ... }
// Should it be?
$('#file_uploader').on('submit', function(e) { ... }

Также

// Where is $final defined and is the extra coma required?
data: { imageURL : $final,},

Это то, что яиспользовать для загрузки файлов CSV.Это может работать и в вашей ситуации.

JS

var formData = new FormData();
var fileName = $('#image_upload').val();
var file = $('#image_upload').prop('files')[0];
formData.append('file', file);

$.ajax({
    url: uploadURL, // PHP file to handle uploads
    dataType: 'text',  // Expected return type
    cache: false,
    contentType: false,
    processData: false,
    data: formData,                         
    type: 'post',
    success: function(response){
        // Handle response
        var path = 'path to image upload dir';
        $('#bgImage').css('background-image', path + response);
    }
});

PHP

if ( 0 < $_FILES['file']['error'] ) {
    echo 'Error: ' . $_FILES['file']['error'] . '<br>';
}
else {
    $path =  'path to image upload dir';
    $image = $_FILES['file']['name'];

    move_uploaded_file($_FILES['file']['tmp_name'], $path . $_FILES['file']['name']);

    setcookie("bg_image", $image, time()+3600, "/", "example.com");
    echo $image;

}

Не говорю, что это отлично решит вашу проблему, но, надеюсь, это поможетпомочь вам добраться до рабочего решения.