为什么我的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>

这是我的uploadimg.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;
   }
}