PHP 和 Ajax 将文件路径上传到 Mysql 并将重命名的图像保存到文件夹失败

Question

我正在尝试将文件路径和其他参数上传到 mysql 并且我使用 Ajax 和 PHP 将文件保存到文件夹失败，对于字符串参数没问题，但是将文件参数获取到数据库我得到空文件数据。

一个错误:Uncaught TypeError: Illegal invocation

HTML 格式:

     ................

 <form role="form" action="" 
          method="post" autocomplete="off" class="form" 
 enctype="multipart/form-data" > 

                            <div class="form-group">
                               <label class="" for="">Ministry in the 
   church(facultative)</label>
                                <input type="text" name="mn_church" placeholder="Facultative" class="form-control" id="mn_church">
                            </div>

                        </fieldset> 
                       <!-- end -->

                       <!-- Attachements -->

                        <fieldset>
                     <h4>Document attachments:</h4><br>       
                        <div class="form-group">
                    <label class="" for="">Last degree obtained</label>
                         <input type="file" name="ldgree" placeholder="Upload" class=" form-control" id="ldgree">
                            </div> 

                 <button type="button" class="btn btn-previous">Previous</button>
                          <button type="button" onclick="insertDataThirdStep() " class="btn btn-next">Next</button>
                            </div>
                        </fieldset> 
                     .............

PHP 代码:

     ------------------      
$mn_church = trim($_POST['mn_church']);
$mn_church = strip_tags($mn_church);
$mn_church = htmlspecialchars($mn_church);

         // upload file
      $ldgree = $_FILES['ldgree']['name'];
      $tmpName = $_FILES['ldgree']['tmp_name'];
      // Rename image with a random number
      $random_digit=rand(0000,9999);
     $renamed_image=$random_digit.$ldgree;
          //upload renamed image and image path to db variable 
             $filePath = $uploadDir . $renamed_image;
       //upload renamed image and  path image to the folder 
   $result = move_uploaded_file($tmpName, $filePath);
    if(!get_magic_quotes_gpc())
  {
// $fileName = addslashes($fileName);

// Add slashes between folder and image     
    $filePath = addslashes($filePath);
    } 
          // end first file
       //start student application by inserting the form's data to database
      $query = "
    UPDATE 
    aku_student_application
     SET 
  mychurch ='$mn_church',
 last_degree_optained='$filePath ',
   "
   -------------------

使用 ajax 的 Jquery 代码我曾经使用 php 来避免页面重新加载:

          var mn_church=$("#mn_church").val();

  //  Attachment    
 var ldgree = $('#ldgree').prop('files')[0];

$.ajax({

        url:'step-4-appli-form-attachments.php',
        method:'POST', 
                data:{   

                        mn_church:mn_church,
                        ldgree:ldgree
                    },
             success:function(response){
                        // alert(response);
                    console.log('Success fourth step');
                    }

Answer 1

使用此解决方案，您可以使用一种形式将多个文件的路径上传到 mysql 并将照片上传到文件夹，我使用的技巧是 FormData 来上传文件和 String(text)。

首先我给出了我的表单 id Id，然后我在 Jquery 文件中引用了 Id 以便在表单数据中使用它。

HTML代码:

................

<form role="form" action="" 
      method="post" autocomplete="off" class="form" 
  enctype="multipart/form-data" id="myform" > 
                        <div class="form-group">
                           <label class="" for="">Ministry in the 
   church(facultative)</label>
                            <input type="text" name="mn_church" placeholder="Facultative" class="form-control" id="mn_church">
                        </div>

                    </fieldset> 
                   <!-- end -->

                   <!-- Attachements -->

                    <fieldset>
                 <h4>Document attachments:</h4><br>       
                    <div class="form-group">
                <label class="" for="">Last degree obtained</label>
                     <input type="file" name="ldgree" placeholder="Upload" class=" form-control" id="ldgree">
                        </div> 

             <button type="button" class="btn btn-previous">Previous</button>
                      <button type="button" onclick="insertDataThirdStep() " class="btn btn-next">Next</button>
                        </div>
                    </fieldset> 
                 .............

我像这样重新格式化了我的 php 代码:

      $mn_church = trim($_POST['mn_church']);
$mn_church = strip_tags($mn_church);
$mn_church = htmlspecialchars($mn_church);

  $fileName = rand(0000,9999).'_'.$_FILES['ldgree']['name'];
    $sourcePath = $_FILES['ldgree']['tmp_name'];
      $targetPath = "images/fuploads/".$fileName;
      if(move_uploaded_file($sourcePath,$targetPath)){
            $uploadedFile = $fileName;
        }
      $query = "
UPDATE 
aku_student_application
 SET 
    mychurch ='$mn_church',
  last_degree_optained='$targetPath' "

与 php 一起工作的 Jquery 代码

      function insertDataFourthStep() {


var form = document.getElementById('myform');
var church _Input = document.getElementById('mn_church');
var Lastdgree_Input = document.getElementById('ldgree').files[0];



var mn_church= new FormData(form);
var ldgree = new FormData(form);


student_id.append("mn_church",church _Input);
ldgree.append("file",Lastdgree_Input);


    $.ajax({

        type: 'POST',
        url: 'step-4-appli-form-attachments.php',
        data:ldgree,mn_church,         
        contentType: false,
        cache: false,
        processData:false, 

        success: function(data){
       console.log('Success fourth step');
            // clear file field
            // $("#ldgree").val("");
        }
    });

   }

感谢 friend 们的积极评价