为什么我的 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的头部。 当我提交表单时，唯一发生的是模式关闭。 该文件也没有上传。