使用 jQuery 表单插件上传 Ajax 文件 - 无效文件错误答案

【问题标题】：Ajax File upload using jQuery Form Plugin - invalid file error使用 jQuery 表单插件上传 Ajax 文件 - 无效文件错误
【发布时间】：2013-03-21 01:12:04
【问题描述】：

我正在尝试使用 jQuery Form Plugin 执行 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);
    }
}); 
});

上传.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 用于其他上传，它工作正常。

感谢您的帮助。

【问题讨论】：

标签： javascript forms jquery upload

【解决方案1】：

如果扩展名没问题，可能是大小问题：脚本正在检查$_FILES["file"]["size"] < 20000。

我会尝试根据您的需要调整该参数。大小单位为千字节，因此为 20000KB ~ 20MB。尝试检查您的图像是否更大。

$extension = end(explode(".", $_FILES["file"]["name"])) 也可能是个问题，具体取决于您上传的文件：它应该有扩展名。

作为最后一次尝试，检查 $_FILES["file"]["type"] 的值，也许你有一些 mime 类型的错误。

【讨论】：

感谢您的回复。我要上传的文件比限制小得多。 upload.php 在其他情况下工作正常，例如 html 表单上传和 XHR2 Ajax 上传。只有当我使用这个 jQuery 表单插件扩展时才会失败。似乎消息“无效文件”来自插件，但没有记录在他们的网站上（我认为）

【解决方案2】：

如果更改插件不打扰您，那么您必须尝试一些更好的插件，例如 this one 我正在使用它，它对开发人员和用户也非常友好。

从here 获取带有演示文件的完整源代码。我相信你不需要做很多改变来把这个插件集成到你现有的代码中:) 希望这对你有帮助

【讨论】：