Php 使用ajax/jquery将图像上载到文件夹

我正在尝试使用ajax、jquery和php将图像上载到文件夹，但问题是我不知道如何将文件输入值发送到php文件，当我运行代码时，我收到以下消息：

未定义索引档案

这是我的ajax调用（PD。所有其他参数工作正常，我只对文件输入值有问题）

PHP文件：

<?php

    $categoria = $_POST['categoria'];
    $nombre = $_POST['nombre'];
    $descripcion = $_POST['descripcion'];
    $img = $_POST['archivo'];
    $activo = $_POST['activo'];
    $disponible = $_POST['disponible'];
    $precio = $_POST['precio'];
    $IdCategoria = 0;
    $filepath = "";

    //Imagen

    if($categoria=="Piano") {
        $IdCategoria = 1;
        $filepath = "../Files/Productos/Piano/".$img; 
    }

    $filetmp = $_FILES['archivo']['tmp_name'];
    move_uploaded_file($filetmp, $filepath);

    echo $IdCategoria.$nombre.$descripcion.$filepath.$activo.$disponible.$categoria.$precio;


?>

---

我怎样才能解决这个问题

按如下方式发送表单数据：

var formData = new FormData($("form")[0]);

$.ajax({
        url: '../../class/upload.php',
        method: 'POST',
        data: formData,
        success: function (data) {
          console.log(data);
        } 
      });

您必须使用

$\u FILES

获取文件，不能在php代码中的

$\u POST

中获取该文件。

更改此设置

  $img = $_POST['archivo'];

到

无法在

$\u POST

中接收文件对象这是您的解决方案

HTML

PHP

可能重复：能否显示“showFilePreview”功能？这可能有你需要的解决方案。它使用FileReader吗？@GarrGodfrey是的，我使用FileReader，我在我的帖子中添加了该代码。@AbdulRafay我正在尝试使用该代码，现在我没有收到任何错误消息，但现在我的函数似乎没有执行，当我提交表单时，我的页面只会被重新加载，我应该在$\u post['']上以那种方式发送数据，放置什么？我输入的名称？您将输入名称属性作为键放入$_POST[]中；我有上面提到的问题。。。现在我没有收到任何错误消息，但现在我的页面只被重新加载，没有显示我的回显行我上面写的代码将与您的ajax函数一起放置。我需要用您的代码替换我的ajax代码，对吗？这里的问题相同，没有打印回显行。只需重新加载页面

function showimagepreview(input) {

            if (input.files && input.files[0]) {
                var reader = new FileReader();
                reader.onload = function (e) {

                    document.getElementsByTagName("img")[0].setAttribute("src", e.target.result);
                }
                reader.readAsDataURL(input.files[0]);
            }
        }

var formData = new FormData($("form")[0]);

$.ajax({
        url: '../../class/upload.php',
        method: 'POST',
        data: formData,
        success: function (data) {
          console.log(data);
        } 
      });

  $img = $_POST['archivo'];

$_FILES['archivo'];

<form id="registerForm" method="post" enctype="multipart/form-data">
    <input name="archivo" id="archivo" style="width: 70%;" class="btn btn-block" type="file" onchange="PreviewImage(this)" />
    <img id="uploadPreview" />
    <button type="submit">Submit</button>

function PreviewImage() {
    var oFReader = new FileReader();
    oFReader.readAsDataURL(document.getElementById("image").files[0]);
    oFReader.onload = function (oFREvent) {
        document.getElementById("uploadPreview").src = oFREvent.target.result;
   };
};

//ajax

$("#registerForm").submit(function(event) {  
    var formData = new FormData($(this)[0]);
    if ($(this).valid()) {
        $.ajax({
            url         : '../../class/upload.php',
            type        : 'POST',
            data        : formData,
            contentType : false,
            cache       : false,
            processData : false,
            success: function(e) {alert(e)  },
            error       : function(x, t, m) {},
        });         
    }
 });

<?php
    echo "<pre>"; print_r($_FILES);echo "</pre>"; die; //this will show you the file transfered by form.
    $categoria = $_POST['categoria'];
    $nombre = $_POST['nombre'];
    $descripcion = $_POST['descripcion'];
    $img = $_POST['archivo'];
    $activo = $_FILES['activo'];
    $disponible = $_POST['disponible'];
    $precio = $_POST['precio'];
    $IdCategoria = 0;
    $filepath = "";

    //Imagen

    if($categoria=="Piano") {
        $IdCategoria = 1;
        $filepath = "../Files/Productos/Piano/".$img; 
    }

    $filetmp = $_FILES['archivo']['tmp_name'];
    move_uploaded_file($filetmp, $filepath);

    echo $IdCategoria.$nombre.$descripcion.$filepath.$activo.$disponible.$categoria.$precio;


?>