PHP:: 使用 ajax 上传

PHP:: Upload with ajax

我目前正在编写该脚本:

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<?php
$path="upload/";
$path=$path.$_FILES['file_upload']['name'];

if(isset($_POST['upload']))
{
    if(move_uploaded_file($_FILES['file_upload']['tmp_name'],$path))
    {
        echo'The file '.basename($_FILES['file_upload']['name']).' has been uploaded';
    }
    else
    {
        echo"There is an error";
    }
}

?>
<form action="#" method="post" enctype="multipart/form-data">
<table width="384" border="1" align="center">
<tr>
<td width="108">Select File</td>
<td width="260"><label>
<input type="file" name="file_upload">
</label></td>
</tr>
<tr>
<td><label>
<button id=clickToUpload type="submit" name="upload">Upload File</button>
</label></td>
<td>&nbsp;</td>
</tr>
</table>
</form>
</body>
</html>

它正在正常工作。

现在,我希望能够用 jQuery...

做同样的事情
<script src="js/jquery.js"></script>
<script>

$('#clickToUpload').click(function(event)
{

event.preventDefault();

$.ajax({
      type: 'POST',
      url: "post.php",
      success: function(data)
      {

      }
});
});

</script>

这是我的 post.php 页面(与正常工作的 index.php 相同)

$path="upload/";
$path=$path.$_FILES['file_upload']['name'];

if(isset($_POST['upload']))
{
    if(move_uploaded_file($_FILES['file_upload']['tmp_name'],$path))
    {
        echo'The file '.basename($_FILES['file_upload']['name']).' has been uploaded';
    }
    else
    {
        echo"There is an error";
    }
}

但是 ajax 似乎不起作用:(

这可能是什么原因?

您必须在调用中明确包含表单数据。

试试这个:

var fd = new FormData($("form"));
$.ajax({
      type: 'POST',
      url: "post.php",
      data:fd,
      contentType: false,
      processData: false,
      success: function(data)
      {

      }
});