Загрузить изображение, используя jQuery, AJAX и PHP

Question

Я пытаюсь выбрать изображение с ПК/мобильного устройства и загрузить его на сервер одним нажатием кнопки, но по какой-то причине я не могу захватить значение (имя) выбранного изображения - $_FILES["pictureCapture"]["name"] внутри страницы PHP. Я могу сделать это легко с помощью двух кнопок, один для просмотра изображения на моем устройстве, а второй для его загрузки, но мне действительно нужна одна кнопка для этих двух процедур.

Мой исходный код:

HTML

<form action="" method="post" enctype="multipart/form-data" onsubmit="test3()"> 
    Select image to upload: 
    <input type="file" name="pictureCapture" id="pictureCapture" accept="image/*; capture=camera" style="visibility:hidden;" onchange="test2();"/> 
    <button type="button" id="uploadPhotoFromCamera" onclick="test();">Choose an image</button> 
    <input id="uploadPhotoToServer" type="submit" value="Upload Image" name="submit" style="visibility:hidden;"/> 
</form> 

JQuery + AJAX

function test(){ 
    event.preventDefault(); 
    $("#pictureCapture").trigger("click"); 
} 

function test2(){ 
    $("#uploadPhotoToServer").trigger("click"); 
} 

    function test3(){ 
     event.preventDefault(); 

     var formData = new FormData(); 
     var fileInput = document.getElementById('pictureCapture'); 
     formData.append(fileInput.files[0].name, fileInput.files[0]); 

     $.ajax({ 
      url : "upload.php", // Url to which the request is send 
      type : "POST", // Type of request to be send, called as method 
      data: formData, // Data sent to server, a set of key/value pairs (i.e. form fields and values) 
      cache : false, // To unable request pages to be cached 
      processData : false, // To send DOMDocument or non processed data file it is set to false 
      contentType: 'multipart/form-data', 
     success : function(result) // A function to be called if request succeeds 
     { 
      alert(result); 
     } 
    }); 
} 

PHP

$target_dir = "uploads/"; 
$target_file = $target_dir .date('d-m-Y-H-i-s').'-'. basename($_FILES["pictureCapture"]["name"]); 
$uploadOk = 1; 
$imageFileType = pathinfo($target_file,PATHINFO_EXTENSION); 

// Check if image file is a actual image or fake image 
if(isset($_POST["submit"])) { 
    $check = getimagesize($_FILES["pictureCapture"]["tmp_name"]); 
    if($check !== false) { 
     echo "File is an image - " . $check["mime"] . "."; 
     $uploadOk = 1; 
    } else { 
     echo "File is not an image."; 
     $uploadOk = 0; 
    } 
} 

// Allow certain file formats 
if($imageFileType != "jpg" && $imageFileType != "png" && $imageFileType != "jpeg" && $imageFileType != "gif") { 
    echo "Sorry, only JPG, JPEG, PNG & GIF files are allowed."; 
    $uploadOk = 0; 
} 

// Check if $uploadOk is set to 0 by an error 
if ($uploadOk == 0) { 
    echo "Sorry, your file was not uploaded."; 
// if everything is ok, try to upload file 
} else { 
    if (move_uploaded_file($_FILES["pictureCapture"]["tmp_name"], $target_file)) { 
     echo "The file ". basename($_FILES["pictureCapture"]["name"]). " has been uploaded."; 
    } else { 
     echo "Sorry, there was an error uploading your file."; 
    } 
} 

Пожалуйста, не могли бы вы помочь мне решить эту проблему!

Answer 1

Вы должны заполнить ваши FormData() с данными файла:

var formData = new FormData(); 
$.each($('pictureCapture')[0].files, function(key, value) { 
    formData.append(key, value); 
}); 

Добавить изменить CONTENTTYPE для мультисекционного в вашем JQuery Ajax вызова:

$.ajax({ 
    ... 
    data: formData, 
    ... 
    contentType: 'multipart/form-data', 
    ... 

Answer 2

Почему просто не отправить форму автоматически используя onchange на входе файла? Как только они выберут файл, он отправит изображение для них. Вот jsfiddle.

или, как относится к вашей ситуации:

$(document).ready(function(){ 
    $('#pictureCapture').change(function(){ 
     this.form.submit(); 
    }); 
});