Upload image to folder using ajax/jquery

Question

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:

undefined index archivo

This is my ajax call (PD. All the other parameters works properly, I only have problems with the file input value)

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

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


?>

And the important parts of my 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]);
            }
        }

How can I solve this?

Possible duplicate: https://stackoverflow.com/questions/23980733/jquery-ajax-file-upload-php — Abdul Rafay, Jul 06 '17 at 03:37
can you show your "showFilePreview" function? That may have the solution for you need. Does it use FileReader? — Garr Godfrey, Jul 06 '17 at 03:40
@GarrGodfrey Yes, I use FileReader, I added that code to my post. — User1899289003, Jul 06 '17 at 03:44
@AbdulRafay I'm trying using that code and now I don't get any error message, but now seems that my function is not executed, when I submit the form my page its only reloaded — User1899289003, Jul 06 '17 at 03:57

score 2 · Answer 1 · answered Jul 06 '17 at 03:41

2

Send your form data like this:

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

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

And you have to get the file with $_FILES, you can not get it in $_POST in php code.

answered Jul 06 '17 at 03:41

Himanshu Upadhyay

6,558
1
20
33

And what should I put on $_POST[' '] sending data in that way? The name of my inputs? – User1899289003 Jul 06 '17 at 03:51
You put your input name attributes as keys in $_POST[]; – Himanshu Upadhyay Jul 06 '17 at 03:58
I have the problem mentioned above... now I dont get any error message but now my page only is reloaded, doesn't show my echo line – User1899289003 Jul 06 '17 at 04:07
The piece of code I wrote above is to be placed with your ajax function. – Himanshu Upadhyay Jul 06 '17 at 04:17
I need to replace my ajax code with your code right? – User1899289003 Jul 06 '17 at 04:34
Yes @User1899289003. – Himanshu Upadhyay Jul 06 '17 at 07:29

score 1 · Answer 2 · answered Jul 06 '17 at 03:43

1

change this

  $img = $_POST['archivo'];

to

$_FILES['archivo'];

Files object cannot be recieved in $_POST

answered Jul 06 '17 at 03:43

FULL STACK DEV

15,207
5
46
66

GYaN · Accepted Answer · 2017-07-06T04:57:25.373

Here is you solution

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 Script

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;


?>

Same issue here, doesn't print the echo lines. just reloads the page — User1899289003, Jul 06 '17 at 04:34

Upload image to folder using ajax/jquery

3 Answers3