jqueryでFormDataを使ってファイルをアップロードするにはどうすればいいですか？

Question

私はHTMLフォームを持っている：

<form enctype="multipart/form-data" id="formUpload"> 
<input type="file" name="file" /> 
<button type="submit" id="sub">Click</button> 
</form> 

マイスクリプト：

$(function() { 
     $("#sub").on("click",function() { 
      var form = $("#formUpload")[0]; 
      var formData = new FormData(form); 
      $.ajax({ 
       url: 'upload.php', 
       data: formData, 
       type: 'POST', 
       contentType: false, 
       processData: false, 
       dataType: 'html', 
       success: function(data) { 
        $("#res").html(data); 
       } 
      }); 
     }); 
    }); 

私はupload.phpでファイルをアップロードしようとするが、すべてが間違っています。 $ _FILES変数はどのように取得できますか？

Answer 1

を送信するたびに、ボタンを送信すると、ページがリフレッシュされ、この文の出力は表示されません。$("#res").html(data);。フォームを最初に送信しないようにするには、event.preventDefault()メソッドを使用します。だからあなたのJavascriptのコードは次のようにする必要があります：

<?php 
    if(is_uploaded_file($_FILES['file']['tmp_name'])){ 
     $name = $_FILES['file']['name']; 
     $type = $_FILES['file']['type']; 
     $size = $_FILES['file']['size']; 

     // ... 

    } 
?> 

：

$(function() { 
    $("#sub").on("click",function (event){ 
     event.preventDefault(); 
     var form = $("#formUpload")[0]; 
     var formData = new FormData(form); 
     $.ajax({ 
      url: 'upload.php', 
      data: formData, 
      type: 'POST', 
      contentType: false, 
      processData: false, 
      dataType: 'html', 
      success: function(data) { 
       $("#res").html(data); 
      } 
     }); 
    }); 
}); 

とバックエンドupload.phpページで、あなたはこのように、$_FILESを使用してアップロードされたファイルのデータにアクセスすることができます