问题

Question

好的，所以我一直在寻找答案已有数周之久。

免责声明

我是Web开发的新手，我已经从中学到了一切。有时我会被卡住，但以前从未被卡住。

问题

我想在我的网站上有一个“上传”按钮，该按钮可自动将图像上传到文件夹并更改同一页面的背景图像而无需重定向。该图像的路径将存储在Cookie中，用户每次访问该页面时都会加载该Cookie，并且该图像也将作为背景图像加载。与Google在屏幕右下方的标准“制表”页面上完全相同。

我已经研究过，显然AJAX非常适合这种情况，因为它使JQuery可以中介php文件。但是我似乎无法理解如何以自己需要的方式使用它。

这是按钮，php文件和JQuery 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文件中引用的某些ID似乎与您的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;

}

并不是说这可以完美解决您的问题，但希望它将帮助您找到可行的解决方案。

图片上传，无需刷新和更改背景

免责声明

问题

index.php

.js

.php

1 个答案: