上传文件和重装一个div，而不是重新加载页面 [英] Upload a file and reloading a div instead reloading a page

问题描述

我的的最后一个问题是有关一个坏重装上传文件后，一个PHP页面。

My last question was related to a bad reloading of a PHP page after uploading a file.

现在我必须重新加载整个页面的只是一个div来代替，而jQuery是不是我最好的朋友。

Now I have to reload just a div instead of the entire page, and JQuery is not my best friend..

我把形式变成股利如下，下面的jQuery函数（我接到的这里）：

I put the form into a div as follows, with the following JQuery function (I got the JQuery code from here):

<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.";
        }
    }
}

如果我改变窗体的操作属性为：

If I change the form's action attribute as:

<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>

我可以上传文件，但没有被重载我想要的，我认为这是明显的。

I can upload the file but nothing is reloaded as I want, and I think it's obvious..

否则，将code上面张贴，浏览器返回错误：

Otherwise, with the code posted above, the browser returns the error:

501未执行

的请求的方法不能识别

从这里我看，这是一个网络服务器的问题.. 该网站的服务器是的httpd

From here I see that this is a web server problem.. The web server is httpd.

我怎样才能解决我的问题？ 谢谢你在前进。

How can I solve my problem ? Thank you in advance.

推荐答案

这是一个工作的例子，你必须使用 FORMDATA ，以便能够通过AJAX发送文件，这将刷新DIV和返回的服务器响应＆LT; D​​IV CLASS =信息＆GT;＆LT; / DIV＆GT;

This is a working example you have to use formData to be able to send files via ajax, this will reload the div and return the server response in <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>

这篇关于上传文件和重装一个div，而不是重新加载页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！