如何通過AJAX和PHP上傳表單中的文件？

這是我到目前爲止嘗試過的，它不工作。 HTML文件包含： -如何通過AJAX和PHP上傳表單中的文件？

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
     <meta charset="utf-8"> 
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
     <title>Form Generator | Upload Driver Specification Sheet</title> 
 
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> 
 
     <script type='text/javascript'> 
 
      function submit_form() { 
 

 
       var formData = new FormData($(this)[0]); 
 

 
       $.ajax({ 
 
        url: 'last_file_action.php', 
 
        type: 'POST', 
 
        data: formData, 
 
        async: false, 
 
        success: function (data) { 
 
         $('#results').html(data); 
 
        }, 
 
        cache: false, 
 
        contentType: false, 
 
        processData: false 
 
       }); 
 

 
       return false; 
 
      } 
 
     </script> 
 
    </head> 
 
    <body class="gray-bg3_full"> 
 
     <form class="m-t" role="form" id='data' method="post" enctype="multipart/form-data"> 
 
      <input type="hidden" name="MAX_FILE_SIZE" value="2000000"> 
 

 
      <div class="form-group"> 
 
       <p id='new_project_text'>Please include your Product spec sheet: </p> 
 
       <input class="btn btn-primary-save btn-block" type="file" name="userfile" /> <i class="fa fa-upload"></i> &nbsp; <br/> 
 
      </div> 
 
      <button type= 'button' id="submit_driver" class="btn btn-warning block full-width m-b m-t" onclick='submit_form()'>Submit</button> 
 
     </form> 
 
     <div id='results'></div> 
 
    </body> 
 
</html>

而且PHP文件即 'last_file_action.php' 包含此： -

<?php 
 

 
if ($_FILES['userfile']['error'] > 0) 
 
{ 
 
    switch ($_FILES['userfile']['error']) 
 
    { 
 
     case 1: 
 
      echo "File exceeded upload_max_filesize"; 
 
      break; 
 
     case 2: 
 
      echo "File exceeded max_file_size"; 
 
      break; 
 
     case 3: 
 
      echo "File only partially uploaded"; 
 
      break; 
 
     case 4: 
 
      echo "Please choose a file to upload"; 
 
      break; 
 
     case 6: 
 
      echo "Cannot upload file: No temp directory specified"; 
 
      break; 
 
     case 7: 
 
      echo "Upload failed: Cannot write to disk"; 
 
      break; 
 
    } 
 
    exit; 
 
} 
 
$upfile = 'productinformation/'; 
 

 
if (is_uploaded_file($_FILES['userfile']['tmp_name'])) 
 
{ 
 
    if (!move_uploaded_file($_FILES['userfile']['tmp_name'], $upfile)) 
 
    { 
 
     echo "Problem: Could not move file to destination directory"; 
 
     exit; 
 
    } 
 
} 
 
else 
 
{ 
 
    echo "Problem: Possible file upload attack. Filename: "; 
 
    echo $_FILES['userfile']['name']; 
 
    exit; 
 
} 
 

 

 

 
// remove possible HTML and PHP tags from the file's contents 
 
$contents = file_get_contents($upfile); 
 
$contents = strip_tags($contents); 
 
file_put_contents($_FILES['userfile']['name'], $contents); 
 
// show what was uploaded

當我點擊提交按鈕我得到這個錯誤「問題：可能的文件上傳攻擊。文件名：」。這是我自己在PHP文件中設置的錯誤。即使我沒有選擇要上傳的文件，它也會顯示此錯誤。如果我不選擇要上傳的文件，我希望它顯示錯誤「請選擇要上傳的文件」。

來源

2016-02-08 Waseem Abbas

沒有一致的縮進，很難遵循該代碼。 – David

[相關]（http://stackoverflow.com/questions/166221/how-can-i-upload-files-asynchronously?rq=1）。 – Kenney

我編輯了這個問題。我希望它更容易爲你現在@David –

這是我做到的。

var formData = new FormData（）;

formData.append（「userfile」，$（「：file」）[0] .files [0]）;

只要你有一個文件，沒有其他輸入字段，上面的代碼是正確的。萬一你有更多的輸入字段和多個文件上傳在一個單一的形式。我們應該考慮目標元素的ID而不是類型$（「：file」）。下面是我們如何能得到其他文件： -

var formData = new FormData(); 
 
formData.append("first_file", $("#1st_file_id")[0].files[0]); 
 
formData.append("2nd_file", $("#2nd_file_id")[0].files[0]); 
 
formData.append("3rd_file", $("#3rd_file_id")[0].files[0]);

這裏是我們如何能夠通過針對其ID得到表單輸入字段中的數據。需要改變

formData.append("input_field", $("#input_field_id").val());

在PHP什麼。如果我們想要得到的輸入字段的值，我們可以做到這一點： -

$var = $_POST['input_field'];

，如果它的一個文件，我們可以通過這個捕捉它，做工作的其餘部分在做題。

$_FILES['userfile'] or $_FILE['2nd_file']

來源

2016-02-09 17:53:05

var formData = new FormData(); 
formData.append("userfile", $(":file")[0].files[0]);

來源

2016-02-08 21:02:03

你應該解釋這將如何幫助OP，以及OP代碼出現問題的原因。 – davejal

好的。大。這可行，但如果我有兩個文件上傳，而不是一個。在這種形式下，只有一個文件，如果我也有一些輸入字段的話。 –

如何通過AJAX和PHP上傳表單中的文件？

回答

相關問題