在服务器端输入类型文件失败的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

的问题是，文件无法通过Ajax后应当提交的PHP不会将它们上传到服务器。

理论上你应该创建一个iframe并使表单在那里提交。实际上只是使用这个jquery插件... http://jquery.malsup.com/form/ :)它会缓解过程

希望它有帮助。

Is it possible to use Ajax to do file upload?

Answer 2

您需要使用有用jQuery validation插件，它不支持要允许上传超过其他不错的选择其他的文件。

您可以使用接受验证插件的属性，让你想要的文件类型，这里有一个例子：

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