所以我正在尝试一个非常简单的表单,其中包含一个字段来上传图像。输入类型为文件。还有一个提交按钮。表单没有 action=",客户端的验证使用 Jquery 验证插件进行。客户端的验证完美进行(它返回文件类型错误),但是一旦我单击上传,服务器端的上传就会失败(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>
您需要使用有用的jQuery验证插件,该插件确实支持您希望允许上传的文件,而不是其他不错的选项。
您可以使用验证插件的 accept 属性来允许您想要的文件类型,下面是一个示例:
$("#form_id").validate({
rules: {
field: {
required: true,
filesize: 1048576,
accept: "gif|jpeg"
}
}
});
问题是文件不能通过ajax post提交,因为PHP不会将它们上传到服务器。
理论上,您应该创建一个 iframe 并在那里提交表单。在实践中,只需使用此jquery插件...http://jquery.malsup.com/form/:)它将简化过程
希望对您有所帮助。
是否可以使用 Ajax 进行文件上传?