Проблема с загрузкой изображения через Ajax Call в php?

Question

Я хочу загрузить изображение с помощью Ajax, но я не могу загрузить изображение. Пожалуйста, проверьте мой код, что я делаю неправильно:

HTML-файл:

<input class="form-control" type="file" name="photo1" id="photo1" accept="image/*" onchange="loadFile2(event)">


<button type="button" class="btn btn-secondary btn-lg btn-block" onclick="createDocsVerify()">Update Details</button>

Ajax Call:

<script>
 function createDocsVerify () {

  var data = {
   'photo1'     : jQuery('#photo1').val(),
  }; 

  //Ajax call Start Here
  jQuery.ajax({
    url : '/myproject/adminseller/sellerdocsverify.php',
    method : 'POST',
    data : data,
    success : function(data){

    if (data != 'passed') { 
     jQuery('#modal_errors_3').html(data);
    }

    if (data == 'passed') {

     jQuery('#modal_errors_3').html("");
     location.reload();
   }
   },
   error : function (){alert("Something went wrong.");},

   });    

  }
  </script>

Файл Php: sellerdocsverify.php

if (isset($_POST['photo1'])) {
   $photo1 = sanitize($_POST['photo1']);
   // var_dump Output: string(20) "C:\fakepath\0553.jpg" 
 }


 $errors = array();
  $required = array(
   'photo1'  => 'Please select Photo 1',
);



// check if all required fileds are fill out
foreach ($required as $field => $display) {
 if (empty($_POST[$field]) || $_POST[$field] == '') {
  $errors[] = $display.'.';
 }
 }


$allowed = array('png', 'jpg', 'jpeg', 'gif');
$photoNameArray = array();
$tmpLoc = array();
$uploadPath = array();



**// Here is the problem**
$name1 = $_FILES['photo1']['name']; // Here is the problem
Var_dump($name1); // OUTPUT: NULL
**// Here is the problem**



$nameArray = explode('.',$name1);
$fileName = $nameArray[0];
$fileExt = $nameArray[1];  

$mime = $_FILES['photo1']['type'];
$mimeType = $mime[0];
$mimeExt = $mime[1];
$tmpLoc = $_FILES['photo1']['tmp_name'];
$fileSize = $_FILES['photo1']['size'];

$uploadName = md5(microtime().$j).'.'.$fileExt;
$uploadPath = BASEURL.'images/products/'.$uploadName;

if ($mimeType != 'image') {
 $errors[] = 'The file must be an image.';
}



if (!empty($errors)) {
  echo display_errors($errors);
 }else{
  echo 'passed';

   // upload file and insert into database
  if ($photoCount > 0) {        
    move_uploaded_file($tmpLoc1, $uploadPath1);
   }

$insertSql = "INSERT INTO docTable  (`photo1`)
VALUES ('$photo1')";
$db->query($insertSql);

$_SESSION['success_flash'] = '<span style="color:#FFFFFF;text-align:center;">Data Saved Successfully!</span>';


}
?>

Пожалуйста, проверьте мой код и подскажите, что я делаю неправильно, я делаю что-то не так в вызове Ajax или в php, получаю значение в $ photo1.

Любая идея или предложение приветствуются.

Answer 1

Для загрузки файлов через AJAX вам нужно сделать несколько «вещей». Вам необходимо создать объект FormData и вручную добавить в него данные файла, а также установить для параметров contentType, processData и cache вашего AJAX-вызова значение false. Ваш javascript должен выглядеть так:

<script>
function createDocsVerify() {
    var formdata = new FormData();
    var file = jQuery('#photo1').prop('files')[0];
    formdata.append('photo1', file);

    //Ajax call Start Here
    jQuery.ajax({
        url: '/myproject/adminseller/sellerdocsverify.php',
        method: 'POST',
        cache: false,
        contentType: false,
        processData: false,
        data: formdata,
        success: function(data) {
            if (data != 'passed') {
                jQuery('#modal_errors_3').html(data);
            }
            if (data == 'passed') {
                jQuery('#modal_errors_3').html("");
                location.reload();
            }
        },
        error: function() {
            alert("Something went wrong.");
        },
    });
}
</script>

Это должно загрузить фото.