ajax/jqueryを使用して画像をフォルダにアップロード

Question

ajax、jquery、phpを使用して画像をフォルダにアップロードしようとしていますが、ファイル入力値を自分のPHPファイルに送信する方法がわかりません。私は自分のコードを実行すると、私は次のメッセージが出ます：。

このarchivo

未定義のインデックスを、私のAJAX呼び出し（PD他のすべてのパラメータが正常に動作している、私は、ファイルの入力値に問題があります）

function Registrar() { 
     var cat = $('#cat').val(); 
     var nom = $('#name').val(); 
     var desc = $('#description').val(); 
     var image = $('#archivo').val(); 
    //Also tried with this, to remove the fakepath string... $('input[type=file]').val().replace(/C:\\fakepath\\/i, '') 

     $.ajax({ 
     url: '../../class/upload.php', 
     method: 'POST', 
     data: { categoria: cat, nombre: nom, descripcion: desc, archivo: image, activo: act, disponible: disp, precio: prec }, 
     success: function (data) { 
      console.log(data); 
     } 
     }); 
    } 

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; 


?> 

そして、私のHTMLの重要な部分：

<form id="registerForm" method="post" role="form" enctype="multipart/form-data" > 
<input name="archivo" id="archivo" style="width: 70%;" name="textinput" class="btn btn-block" type="file" onchange="showimagepreview(this)" /> 

はEDIT：showimagepreview

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]); 
      } 
     } 

どのように私はこの問題を解決することができますか？

Answer 1

$_POSTで受け取っすることはできません はあなたのソリューションです

HTML

<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> 

Javaスクリプト

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

<?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; 


?> 

Answer 2

このようなフォームデータを送信する：

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

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

そして、あなたが$_FILESでファイルを取得する必要があり、あなたは、PHPコードで$_POSTでそれを得ることができません。

Answer 3

変更この

$img = $_POST['archivo']; 

へ

$_FILES['archivo']; 

ファイルオブジェクトはここ