Question

我的last question与上传文件后重新加载PHP页面有关。

现在我只需要重新加载div而不是整个页面，而JQuery不是我最好的朋友..

我将表单放入div中，如下所示，使用以下JQuery函数（我从here获得了JQuery代码）：

<div id="updiv">
<form id="uploadFile" action="" method="post" enctype="multipart/form-data">
<h3>Upload a file:</h3>
<input type="file" name="fileToUpload" id="fileToUpload">
<input type="submit" id="submit" value="Upload" name="submit">
</form>
</div>

<script>
$('#uploadFile').submit(function()
{
  event.preventDefault();
  $.ajax(
  {
    url: "upload.php",
    type: 'POST',
    data: $(this).serialize(),
    success: function(data)
    {
      $("#updiv").fadeOut();
      setTimeout(1000);
      $("#updiv").fadeIn();
    });
  });

  $(this).ajaxSubmit(options);
      return false;
});
</script>

这是 upload.php 文件：

<?php
/* upload.php */
set_time_limit(0);

$targetDir = "/path/to/upload/dir";
$targetFile = $targetDir . basename($_FILES["fileToUpload"]["name"]);
$upload = 1;
$fileType = pathinfo($targetFile, PATHINFO_EXTENSION);

if(isset($_POST["submit"]))
{
    /* Check file size */
    if($_FILES["fileToUpload"]["size"] > 500000)
    {
        echo "Sorry, your file is too large.";
        $upload = 0;
    }
    /* Allow certain file formats */
    if($fileType != "data" )
    {
        echo "Sorry, non valid filetype.";
        $upload = 0;   
    }
    /* Check if $uploadOk is set to 0 by an error */
    if($upload == 0)
    {
        echo "Sorry, your file was not uploaded.";
    } 
    else
    {
        if (move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], $targetFile))
        {
            echo "The file ". basename( $_FILES["fileToUpload"]["name"]). " has been uploaded.";
        }
        else
        {
            echo "Sorry, there was an error uploading your file.";
        }
    }
}

如果我将表单的操作属性更改为：

<form id="uploadFile" action="upload.php" method="post" enctype="multipart/form-data">
<h3>Upload a file:</h3>
<input type="file" name="fileToUpload" id="fileToUpload" required>
<input type="submit" id="submit" value="Upload" name="submit">
</form>

我可以上传文件，但没有按照我的意愿重新加载，我认为这很明显..

否则，使用上面发布的代码，浏览器会返回错误：

501未实施

无法识别请求的方法

从here我看到这是一个Web服务器问题.. 网络服务器是 httpd 。

如何解决我的问题？提前谢谢。

Answer 1

我建议您使用blueimp jQuery File Upload

有一个演示php项目，你可以从中获得想法，here你可以学习如何实现它。
并且关于重新加载div部分我不知道你的意思是什么，请你解释一下吗？

<强>更新：
您的upload.php文件的输出可以加载到updiv。例如，如果您在die('blabla');中执行upload.php，则可以将其用作updiv内部html。如果您使用我上面提到的jQuery插件，它将是这样的：

<script>
$(function () {
    $('#fileupload').fileupload({
        dataType: 'html', // this could be json too, depends on your needs
        done: function (e, data) { // data.result is whatever returned from your upload.php
            $.each(data.result.files, function (index, file) {
                $('#updiv').html(data.result);
            });
        }
    });
});
</script>

Answer 2

这是一个工作示例，您必须使用formData才能通过ajax发送文件，这将重新加载div并在<div class="info"></div>

中返回服务器响应

  <form id="uploadFile" enctype="multipart/form-data">
    <h3>Upload a file:</h3>
    <input type="file" name="fileToUpload" id="fileToUpload">
    <input type="submit" id="submit" value="Upload" name="submit">
  </form>
  <!-- Response Output -->
  <div class="info" style="display:none"></div>
</div>

<div id="updiv">
<form id="uploadFile" enctype="multipart/form-data">
<h3>Upload a file:</h3>
<input type="file" name="fileToUpload" id="fileToUpload">
<input type="submit" id="submit" value="Upload" name="submit">
</form>

<!-- Response Output -->
<div class="info" style="display:none"></div>

</div>

<script>
$('#uploadFile').submit(function()
{
  event.preventDefault();
  $("#updiv").fadeOut();
  $.ajax(
  { 
    url: "upload.php",
    type: 'POST',
    data: new FormData(this),
    contentType: false,
    processData: false,
    success: function(data)
    {
      $('.info').html(data);    
      $('.info').show();    
      $("#updiv").fadeIn();
    }
  });

});
</script>

Answer 3

在多部分表单上使用jQuery .serialize()将不会通过文件数据发送。

有关详细信息，请参阅this answer，但基本上可以执行

data: new FormData($(this)[0])

而不是

data: $(this).serialize()

另外添加

processData: false

到$.ajax对象参数。

关于测试的主题，如果您提交没有涉及jQuery的表单，您是否检查过表单提交和文件上传是否正常工作？

上传文件并重新加载div而不是重新加载页面

3 个答案: