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插件，该插件支持您希望上传的文件，而不是其他不错的选项。

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

$("#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?

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

2 个答案: