save an upload image in a folder without form - php

Question

I want to upload an image from an input, and save it in a folder (called 'photos').
In HTML, I have a simple input type file like this:
<input type="file" name="inputFile" id="inputFile" accept="image/jpeg,
image/png">
<span>Scegli una foto</span>
<input id="Invia" type="button" value="Invia">
In Javascript, i used this AJAX call:
var myFormData = new FormData();
myFormData.append($("#inputFile")[0].files[0]['name'], $("#inputFile")[0].files[0]);
$("#Invia").click(function (){
$.ajax({
type: 'POST',
processData: false,
contentType: false,
data: myFormData,
url: "../api/photo.php",
dataType : 'json',
success: function(jsonData){}
});
});
In PHP, the '../api/photo.php' file is this:
<?php
header('Content-Type: application/json; charset=utf-8');
$destination= '../app/photos';
$tmp_name = $_FILES["inputFile"]["tmp_name"];
$name = $_FILES["inputFile"]["name"];
move_uploaded_file($tmp_name, "$destination/$name");
?>
But it doesn't work. I'm not an expert of POST method, so i don't know what I'm doing wrong. Can you help me?

Answer 1

The problem is because your append values... I Checked in my local with your Script and alter something like ajax-url and success message for my convenient This is my code Please Check and let me know:
$("#Invia").click(function (){
var form = new FormData();
var myFormData = document.getElementById('inputFile').files[0]; //get the file
if (myFormData) { //Check the file is emty or not
form.append('inputFile', myFormData); //append files
}
$.ajax({
type: 'POST',
processData: false,
contentType: false,
data: form,
url: "test1.php", //My reference URL
dataType : 'json',
success: function(jsonData){
if(jsonData == 1)
$('#img_msg').html("Image Uploaded Successfully");
else
$('#img_msg').html("Error While Image Uploading");
}
});
});
You don't need to change your php file but, Double check your Folder path is correct for storing the Image...