為什么我的 JQuery PHP 圖片上傳 function 無法正常工作？

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>

這是我上傳的img.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

這是我的 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>

這是我上傳的img.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的頭部。 當我提交表單時，唯一發生的是模式關閉。 該文件也沒有上傳。