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

Ajax File upload using jQuery Form Plugin - invalid file error

本文关键字:文件 无效 错误 jQuery 表单 插件 使用      更新时间:2023-09-26

我试图使用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进行其他上传,它工作得很好。

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

我会根据你的需要调整这个参数。大小单位是千字节,因此是20000KB ~ 20MB。试着检查一下你的图片是否更大。

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

作为最后一次尝试,检查$_FILES["file"]["type"]的值,可能您有一些时间类型错误

如果它不打扰你改变插件,那么你必须尝试一些更好的插件,像这个我正在使用它,它真的太开发人员友好和用户友好了。

从这里获取完整的源代码和演示文件。我相信你将不必做很多改变来整合这个插件到你现有的代码:)希望这有助于你