输入类型文件的 JQuery 验证在服务器端失败

Question

所以我正在尝试一个非常简单的表单，其中包含一个字段来上传图片。输入类型是文件。还有一个提交按钮。该表单没有 action="" 并且客户端的验证使用 Jquery Validation 插件进行。客户端的验证非常完美（它返回文件类型错误），但是一旦我单击上传，服务器端的上传就会失败（PHP 文件）。我不认为该文件正在服务器端读取，因为 if 条件失败。我的代码是这样的：

<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.20.custom.min.js"></script>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>
<script language="javascript">
    $(document).ready(function(){
        $("#upload").validate({
            debug: false,
            rules: {
                file: {required: true, accept: "gif|png|jpg|jpeg"}
            },
            messages: {
                file: "*Please select a file",
            },
            submitHandler: function(form) {
                // do other stuff for a valid form
                var phpurl = 'upload_file.php';
                $.post(phpurl, $("#upload").serialize(), function(data) {
                    alert(data);
                });
            }
        });
    });
</script>

PHP 代码：

<?php
if (($_FILES["file"]["type"] == "image/gif")
|| ($_FILES["file"]["type"] == "image/jpeg")
|| ($_FILES["file"]["type"] == "image/pjpeg"))
  {
  if ($_FILES["file"]["error"] > 0)
    {
    print "Return Code: " . $_FILES["file"]["error"] . "<br />";
    }
  else
    {
    print "Upload: " . $_FILES["file"]["name"] . "<br />";

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

我收到的警告输出 - 始终是无效文件。

如果我在没有 Jquery 验证的情况下尝试表单并直接使用 action="upload_file.php 方法，它会完美运行。有什么问题？

HTML：

<form id="upload" method="post"
enctype="multipart/form-data">
<label for="file">Filename:</label>
<input type="file" name="file" id="file" /> 
<br />
<input type="submit" name="submit" value="Submit" />
</form>

Answer 1

您需要使用有用的jQuery validation 插件，该插件确实支持您希望允许上传的文件，而不是其他不错的选项。

您可以使用验证插件的接受属性来允许您想要的文件类型，这里是一个示例：

$("#form_id").validate({
  rules: {
    field: {
      required: true,
      filesize: 1048576,
      accept: "gif|jpeg"
    }
  }
});

Answer 2

问题是无法通过ajax post提交文件，因为PHP不会将它们上传到服务器。

理论上你应该创建一个 iframe 并在那里提交表单。在实践中，只需使用这个 jquery 插件...http://jquery.malsup.com/form/ :) 它将简化流程

希望对你有帮助。

Is it possible to use Ajax to do file upload?