如何通过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上传表单中的文件？

回答

相关问题