Ajax - 通過ajax發送輸入文件和附加變量到php文件

我試圖通過ajax發送input file和input text。因爲我會將此功能添加到我的現有功能有很多其他變量，我不能簡單地使用發送整個Form喜歡這裏Ajax - 通過ajax發送輸入文件和附加變量到php文件

Uploading both data and files in one form using Ajax?

使用的一個。這是它的基本精神

我的HTML

<input type='text' name='text' id='text'> 
<input type='file' name='media' type="file"/id='media'> 
<input type="button" value="Upload" name='submit'/>

我阿賈克斯

$(":button").click(function(){ 
     var myFormData = new FormData(); 
     var media = document.getElementById('media'); 
     var variable = 'foo'; 
     myFormData.append('pictureFile', media.files[0]); 
     var text = $("#text").val(); 
     $.ajax({ 
      type: 'POST', 
      url: 'upload.php', 
      data: 
      { 
       pictureFile: myFormData, 
       text: text, 
       var: variable, 
      }, 
      cache: false, 
      success: function (data) { 
       alert(data); 
      }, 
      processData: false, 
      contentType: false, 
     }); 
});

如在我的代碼

PHP

include_once ("connection.php"); 
if ($_SERVER['REQUEST_METHOD'] == 'POST'){ 

    $temp_name = $_FILES['pictureFile']['name']; 
    $pic_type = $_FILES['pictureFile']['type']; 

    $pic_temp = $_FILES['pictureFile']['tmp_name']; 
    $pic_path = "images/"; 
    move_uploaded_file($pic_temp,'images/'.$temp_name); 

}

所以我需要一種方法來那些var media，var text和var variable從data:{},發送到upload.php

來源

2017-01-31 thewheeloftimefan

可以實現通過使用追加

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Jquery Ajax File Upload</title> 
</head> 
<body> 
    <input type='text' name='text' id='text'> 
    <input type="file" name="media" id="media"> 
    <div class="result"></div> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
    <script> 
    $(document).ready(function(){ 
     $('#media').change(function(e){ 
      var file = this.files[0]; 
      var form = new FormData(); 
      form.append('media', file); 
      form.append('text', $('#text').val()); 
      $.ajax({ 
       url : "upload.php", 
       type: "POST", 
       cache: false, 
       contentType: false, 
       processData: false, 
       data : form, 
       success: function(response){ 
        $('.result').html(response.html) 
       } 
      }); 
     }); 
    }); 
    </script> 
</body> 
</html>

來源

2017-01-31 03:37:14

謝謝，這可以通過兩個以上的變量來完成嗎？編輯：nvm只是試了一下。再次感謝 – thewheeloftimefan

很高興我能幫到你。乾杯:) –

這怎麼可以修改輸入「多」的屬性？ –

Ajax - 通過ajax發送輸入文件和附加變量到php文件

回答

相關問題