title: Upload image to folder using ajax/jquery
body: <p>I'm trying to upload an image to a folder using ajax, jquery and php but the problem is that I don't know how to send my file input value to my php file, when I run my code I get the following message:</p>
  
  <blockquote>
    <p>undefined index archivo</p>
  </blockquote>
  
  <p>This is my ajax call (PD. All the other parameters works properly, I only have problems with the file input value)</p>
  
  <pre><code>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);
          } 
        });
      }
  </code></pre>
  
  <p>PHP file:</p>
  
  <pre><code>&lt;?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;
  
  
  ?&gt;
  </code></pre>
  
  <p>And the important parts of my HTML:</p>
  
  <pre><code>&lt;form id="registerForm" method="post" role="form" enctype="multipart/form-data" &gt;
  &lt;input name="archivo" id="archivo" style="width: 70%;" name="textinput" class="btn btn-block" type="file" onchange="showimagepreview(this)" /&gt;
  </code></pre>
  
  <p><strong>EDIT: showimagepreview</strong></p>
  
  <pre><code>function showimagepreview(input) {
  
              if (input.files &amp;&amp; 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]);
              }
          }
  </code></pre>
  
  <p>How can I solve this? </p>