文件上传Javascript

Question

I've been scrolling trough stack and couldn't find any answers related to my question.

The problem is as follows:

When i post an image the name is NULL so it doesn't post the image name :/ it won't upload the image to.

My ajax post:

$.ajax({
      url: 'handler.php', 
      type: 'POST',
      data: new FormData($(where.parentNode)[0]),
      processData: false                   
        }).done(function(result){
            console.log("Success: Files sent!", result);
        }).fail(function(){
            console.log("An error occurred, the files couldn't be sent!");
        });

Creating the form and process it.

var elem = document.querySelectorAll('p,h1,h2,h3,h4,h5,h6,span,b,bold,i,li,strong,em,small,sub,sup,ins,del,mark,img');

for (var i = elem.length - 1; i >= 0; i--) {
    if (elem[i].className == "no-edit") {
    } else {
        if ($(elem[i]).attr("ID") != "livekit") {
            if(elem[i].nodeName == "IMG"){
                $(elem[i]).css("max-width", elem[i].width);
                $(elem[i]).css("max-height", elem[i].height);
                console.log("W: " + elem[i].width + " H: " + elem[i].height + " | " + elem[i].src);

                var imageControl = document.createElement("form");
                imageControl.className += 'livekit-nosave';
                imageControl.action += 'handler.php';
                imageControl.enctype = "multipart/form-data";
                imageControl.method = "POST";
                imageControl.innerHTML += '<input id="image" name="image" type="file" onchange="previewFile(this)">';

                var imageContain = document.createElement("div");
                imageContain.className += 'livekit-nosave';
                insertAfter(elem[i], imageContain);
                imageContain.appendChild(imageControl);
                imageControl.appendChild(elem[i]);
            }else{
            $(elem[i]).click(function() {
                if(this != previous){
                    if(previous == 'undefined'){
                    }else{
                        previous.style.zIndex = 1;
                        previous.lastChild.remove();
                        previous.lastChild.remove();
                    }
                    this.innerHTML += "<img class='edit-img livekit-nosave' src='http://www.starlinedesign.nl/livekit_remake/includes/img/edit.png' contenteditable='false' alt='Edit text'>";
                    this.innerHTML += "<div class='edit-bar livekit-nosave' contenteditable='false'><a class='save' onclick='save(this.parentNode);'>Opslaan</a></div>";
                    $(this).addClass("editable");
                    this.contentEditable = true;
                    this.style.zIndex = 99998;
                    previous = this;
                }
            });

        }
        }
    }
}

the handler.php

if(ini_get('file_uploads') == 1){
  $response_array["status"] = "HTTP Upload Enabled";
  if(isset($_FILES["file"]["type"])){
    $response_array["status"] = "File received";
  }elseif(!empty($_POST)){
    var_dump($_POST['file']);
    $response_array['status'] = 'Success';
    // verwerken van de post
    //$_FILE['name']['image'];
    if(file_exists('livekit_uploads/' . $_FILES['image']['name'])){
            die('File with that name already exists.');
        }else{
        $errors= array();
        $file_name = $_FILES['image']['name'];
        $file_size =$_FILES['image']['size'];
        $file_tmp =$_FILES['image']['tmp_name'];
        $file_type=$_FILES['image']['type'];   
        $file_ext=strtolower(end(explode('.',$_FILES['image']['name'])));

        $expensions= array("jpeg","jpg","png");         
        if(in_array($file_ext,$expensions)=== false){
            $errors[]="extension not allowed, please choose a JPEG or PNG file.";
        }
        if($file_size > 2097152){
        $errors[]='Bestand mag niet groter zijn dan 2mb! Verklein met photoshop d.m.v save as web image en dan de kwaliteit naar 75 te doen.';
        }               
        if(empty($errors)==true){
            move_uploaded_file($file_tmp,"images/".$file_name);
            echo "Success";

//          $query = $conn -> prepare("
//              INSERT INTO includeimage (`image_url`, `order_id`) VALUES ('$file_name', '$orderid');
//          ");
//          $query -> execute();
        }else{
            print_r($errors);
        }
    }
  }
}else {
  $response_array["status"] = "Niks ontvangen";
}

My question is: why is the form not submitting any form data? I need the file name so I can post it to the database, I also need the file name to upload it to the uploads folder.

Console says:

edit.js:221 Success: Files sent! NULL File with that name already exists.

Answer 1

You do a var_dump($_POST['file']); but there is no field with name="file". I only see a input-field called "image". As the PHP-documentation states (http://php.net/manual/en/features.file-upload.post-method.php), you have an array with information in $_FILES. Look at the following part:

$_FILES['userfile']['name']

The original name of the file on the client machine.

So, to get the name, you should be using $_FILES['image']['name'].