jqueryで$ .postを使用して、アップロードされたファイルを任意のPHPファイルに送信して処理するにはどうすればよいですか？

Question

実際に私のフォーム（私のアップロードファイルを含む）をPHPのアップロード処理ファイルに送ることによって、$ .postを使って写真を非同期的にアップロードしたいと思います。 .serializeArray()は必要ありません。いくつかの方法を示唆することができますか？

HTML：

<form action="upload1.php" method="post" id="usrform" enctype="multipart/form-data" > 
     <div class="input-group text-center "> 
     <input type="file" class="form-control btn btn-default" name="fileToUpload" id="fileToUpload"data-toggle="tooltip" data-placement="left" title="Choose your video to upload by clicking on the choose file button"></div> 
     <br><div class="form-group"><strong><span class="glyphicon glyphicon-pencil" style="font-size:13px" ></span> Caption:</strong> <input form="usrform" name="post"id="textarea1" type="text" class="form-control" name="image" placeholder="Write something" data-toggle="tooltip" data-placement="top" title=""> 
     </div> 
     <div class="text-right"> 
     <button type="submit" id="sub"class="btn btn-primary">POST</button> 
     </div></form> 

のjavascript：

$('#sub').click(function(){$.post('porthome_.php',$("#usrform").serializeArray(),function(info){ 

      clearInput();$("#myModal1 .close").click(); 

      });}); 

      $('#usrform').submit(function(){return false;}); 

PHP：

<?php 
require("../includes/config.php"); 

$target_dir = "uploads/"; 
$target_file = $target_dir . basename($_FILES["fileToUpload"]["name"]); 
$uploadOk = 1; 
$imageFileType = pathinfo($target_file,PATHINFO_EXTENSION); 
// Check if image file is a actual image or fake image 
if(isset($_POST["submitfile"])) { 
    $check = getimagesize($_FILES["fileToUpload"]["tmp_name"]); 
    if($check !== false) { 
     //apologize("File is an image - " . $check["mime"] . ".","portimage_.php","Error"); 
     $uploadOk = 1; 
    } else { 
     apologize("File is not an image.","portimage_.php","Error"); 
     $uploadOk = 0; 
    } 
} 
// Check if file already exists 
if (file_exists($target_file)) { 
    apologize("Sorry, file already exists.Try changing the name of your image file.","portgallery_.php","Error"); 
    $uploadOk = 0; 
} 
// Check file size 
if ($_FILES["fileToUpload"]["size"] > 5000000) { 
    apologize("Sorry, your file is too large.","portimage_.php","Error"); 
    $uploadOk = 0; 
} 
// Allow certain file formats 
if($imageFileType != "jpg" && $imageFileType != "png" && $imageFileType != "jpeg" 
&& $imageFileType != "gif") { 
    apologize("Sorry, only JPG, JPEG, PNG & GIF files are allowed.","portimage_.php","Error"); 
    $uploadOk = 0; 
} 
// Check if $uploadOk is set to 0 by an error 
if ($uploadOk == 0) { 
    apologize("Sorry, your file was not uploaded.","portimage_.php","Error"); 
// if everything is ok, try to upload file 
} else { 
    if (move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], $target_file)) { 


    apologize("The file ". basename($_FILES["fileToUpload"]["name"]). " has been uploaded.","porthome_.php","Success"); 

    } else { 
     apologize("Sorry, there was an error uploading your file.","portimage_.php","Error"); 
    } 
}?> 

そうする他の方法があれば、それは認識されるであろう。

Answer 1

私はjQueryを使用していないので、ここまで使った$.post()関数で実際のガイダンスを提供することはできませんが、プレーンなバニラのjavascriptではこのようにすることができます。

<form action="upload1.php" method="post" id="usrform" enctype="multipart/form-data" > 
    <div class="input-group text-center "> 
     <input type="file" class="form-control btn btn-default" name="fileToUpload" id="fileToUpload"data-toggle="tooltip" data-placement="left" title="Choose your video to upload by clicking on the choose file button"> 
    </div> 
    <br> 
    <div class="form-group"> 
     <strong><span class="glyphicon glyphicon-pencil" style="font-size:13px" ></span> Caption:</strong> 
     <input form="usrform" name="post"id="textarea1" type="text" class="form-control" name="image" placeholder="Write something" data-toggle="tooltip" data-placement="top" title=""> 
    </div> 
    <div class="text-right"> 
     <button type="submit" id="sub" class="btn btn-primary">POST</button> 
    </div> 
</form> 

<script> 
    function uploadfiles(e){ 
     var data=new FormData(document.getElementById('usrform')); 
     var xhr=new XMLHttpRequest(); 
     xhr.onload=function(e){ 
      /* You probably would want to do more than popup an alert here! */ 
      alert(this.response); 
     } 
     xhr.onerror=function(e){ 
      alert(e); 
     } 
     xhr.open('POST', 'upload1.php', true); 
     xhr.send(data); 
    } 
    document.addEventListener('DOMContentLoaded',function(){ 
     document.getElementById('sub').onclick=uploadfiles; 
    },false); 
</script>