使用jQuery Form插件上傳Ajax文件-無效的文件錯誤

Question

我正在嘗試使用jQuery表單插件來執行ajax文件上傳。 我復制了其中一個示例，當嘗試上傳時，出現以下文本：

100％
無效的文件

控制台指示：

XHR完成加載：

但沒有上傳任何內容。

我正在使用XAMPP，並已使用chmod -R 777在我的上載文件夾中啟用了許可。我要上載的文件是.png。 下面是代碼：

index.html

<form action="upload.php" method="post" enctype="multipart/form-data">
   <input type="file" name="myfile"><br>
   <input type="submit" value="Upload File to Server">
</form>
<div class="progress">
   <div class="bar"></div >
   <div class="percent">0%</div >
</div>
<div id="status"></div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
<script src="http://malsup.github.com/jquery.form.js"></script>
<script src="ajax.js"></script>

ajax.js

$(document).ready(function() {

var bar = $('.bar');
var percent = $('.percent');
var status = $('#status');

$('form').ajaxForm({
    beforeSend: function() {
        status.empty();
        var percentVal = '0%';
        bar.width(percentVal)
        percent.html(percentVal);
    },
    uploadProgress: function(event, position, total, percentComplete) {
        var percentVal = percentComplete + '%';
        bar.width(percentVal)
        percent.html(percentVal);
    },
    success: function() {
        var percentVal = '100%';
        bar.width(percentVal)
        percent.html(percentVal);
    },
    complete: function(xhr) {
        status.html(xhr.responseText);
    }
}); 
});

upload.php

<?php
$allowedExts = array("gif", "jpeg", "jpg", "png");
$extension = end(explode(".", $_FILES["file"]["name"]));
if ((($_FILES["file"]["type"] == "image/gif")
|| ($_FILES["file"]["type"] == "image/jpeg")
|| ($_FILES["file"]["type"] == "image/jpg")
|| ($_FILES["file"]["type"] == "image/png"))
&& ($_FILES["file"]["size"] < 20000)
&& in_array($extension, $allowedExts))
  {
  if ($_FILES["file"]["error"] > 0)
    {
    echo "Return Code: " . $_FILES["file"]["error"] . "<br>";
    }
  else
    {
    echo "Upload: " . $_FILES["file"]["name"] . "<br>";
    echo "Type: " . $_FILES["file"]["type"] . "<br>";
    echo "Size: " . ($_FILES["file"]["size"] / 1024) . " kB<br>";
    echo "Temp file: " . $_FILES["file"]["tmp_name"] . "<br>";

    if (file_exists("upload/" . $_FILES["file"]["name"]))
      {
      echo $_FILES["file"]["name"] . " already exists. ";
      }
    else
      {
      move_uploaded_file($_FILES["file"]["tmp_name"],
      "upload/" . $_FILES["file"]["name"]);
      echo "Stored in: " . "upload/" . $_FILES["file"]["name"];
      }
    }
  }
else
  {
  echo "Invalid file";
  }
?>

注意，我認為問題出在擴展而不是upload.php，因為我將此php用於其他上傳，並且工作正常。

感謝您的幫助。

Answer 1

如果擴展名合適，則可能是大小問題：腳本正在檢查$_FILES["file"]["size"] < 20000 。

我會嘗試根據您的需要調整該參數。 大小單位為千字節，因此為20000KB〜20MB。 嘗試檢查圖像是否更大。

$extension = end(explode(".", $_FILES["file"]["name"]))可能是一個問題，具體取決於您要上傳的文件：應該具有擴展名。

作為最后的嘗試，檢查$_FILES["file"]["type"] ，也許您有一些mime-type錯誤。

Answer 2

如果它不打擾你改變插件，那么你必須嘗試像一些更好的插件， 這個我使用它，它真的太適合開發者和用戶友好了。

從此處獲取帶有演示文件的完整源代碼。 我敢肯定，您無需進行很多更改即可將該插件集成到您的現有代碼中：)希望這對您有所幫助