0

所以我正在尝试一个非常简单的表单，其中包含一个字段来上传图像。输入类型是文件。还有一个提交按钮。该表单没有 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>
4

2 回答 2

1

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

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

$("#form_id").validate({
  rules: {
    field: {
      required: true,
      filesize: 1048576,
      accept: "gif|jpeg"
    }
  }
});
于 2012-07-20T14:55:42.283 回答
0

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

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

希望能帮助到你。

是否可以使用 Ajax 进行文件上传？

于 2012-06-22T03:49:25.740 回答