Почему не работает моя JQuery PHP функция загрузки изображений?

Question

Это мой JQuery код:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
            $(document).ready(function(){
                $('.addproductimgform').submit(function(event){
                    var file_data = $('.addprodimg').prop('files')[0];
                    var form_data = new FormData();
                    form_data.append('file', file_data);
                    $.ajax({
                            url: 'uploadimg.php',
                            type: 'post',
                            data: form_data,
                            contentType: false,
                            processData: false,
                            success: function(response){
                                if(response != 0){
                                    $("#upimg").attr("src",response); 
                                    $(".preview img").show(); // Display image element
                                }else{
                                    alert('file not uploaded');
                                }
                    });
                });
            });
        </script>

Это моя загрузка. php код:

$filename = $_FILES['file']['name'];

$location = "Assets/Images/".$filename;
$uploadOk = 1;
$imageFileType = pathinfo($location,PATHINFO_EXTENSION);

$valid_extensions = array("jpg","jpeg","png");
if( !in_array(strtolower($imageFileType),$valid_extensions) ) {
   $uploadOk = 0;
}

if($uploadOk == 0){
   echo 0;
}else{
   if(move_uploaded_file($_FILES['file']['tmp_name'],$location)){
      echo $location;
   }else{
      echo 0;
   }
}

А это мой JSP код формы:

<form class="addproductimgform" method="post" action="" enctype="multipart/form-data">
                        <table>
                            <tr>
                                <td>
                                    <input class="addprodimg" type="file" name="productImage" size="50" required/>
                                </td>
                                <td>
                                    <button type="submit" class="btn btn-link addproductimgbtn">Upload File</button>
                                </td>
                            </tr>
                        </table>
                        </form>

Приведенная выше форма размещена в модальном виде, а код JQuery - в разделе заголовка JSP. Когда я отправляю форму, единственное, что происходит, это то, что модальное закрытие. Файл также не загружается.

Answer 1

Здесь ваше имя файла productImage для ввода, который используется для загрузки, и в вашем php коде вы называете файл загрузки как `file``. Измените ваш код на

$filename = $_FILES['productImage']['name'];

$location = "Assets/Images/".$filename;
$uploadOk = 1;
$imageFileType = pathinfo($location,PATHINFO_EXTENSION);

$valid_extensions = array("jpg","jpeg","png");
if( !in_array(strtolower($imageFileType),$valid_extensions) ) {
   $uploadOk = 0;
}

if($uploadOk == 0){
   echo 0;
}else{
   if(move_uploaded_file($_FILES['productImage']['tmp_name'],$location)){
      echo $location;
   }else{
      echo 0;
   }
}