使用 jQuery 验证和发布

Question

我想知道如何使用 jquery 验证和发布图片上传论坛。只有两个输入：标题和图像。如果这些字段中的任何一个为空或上传的文件格式错误，我需要给出一个错误。这是我的代码（目前不使用 jquery。）

图片.php

<?php

$uploadDir = 'images/'; //Image Upload Folder
if(isset($_POST['Submit']))
{
    $title = mysql_real_escape_string($_POST['title']); 
    $fileName = $_FILES['Photo']['name'];
    $tmpName = $_FILES['Photo']['tmp_name'];
    $fileSize = $_FILES['Photo']['size'];
    $fileType = $_FILES['Photo']['type'];
    $filePath = $uploadDir . $fileName;
    $result = move_uploaded_file($tmpName, $filePath);
    if (!$result) {
        echo "Error uploading file";
        exit;
    }
    if(!get_magic_quotes_gpc())
    {
        $fileName = addslashes($fileName);
        $filePath = addslashes($filePath);
    }
    $query = "INSERT INTO images(title,image) VALUES ('".$title."','".$filePath."')";
    mysql_query($query) or die (mysql_error());
}
?>

<form name="Image" enctype="multipart/form-data" action="image.php" method="POST">
<input type="text" name="title" id="title" value=""><br/><br/>
<input type="file" name="Photo" size="20" accept="image/gif, image/jpeg, image/x-ms-bmp, image/x-png"><br/>
<INPUT type="submit" class="button" name="Submit" value=" Submit ">
</form>

Answer 1

您可以在扩展程序上进行验证...

$('form').submit(function(event) {
   var file = $('input[type=file]').val();       

   if ( ! file) {
       alert('The file is required.');
       event.preventDefault();
       return;
   } 

   if (file.match(/\.(?:jpeg|jpg|gif)$/)) {
       alert('Image files only!');
       event.preventDefault();
   }

});

...或者您可以验证 mime 类型。

$('form').submit(function(event) {
   var file = $('input[type=file]').prop('files')[0];

   if ( ! file) {
       alert('The file is required.');
       event.preventDefault();
       return;
   } 

   var mime = file.type;

   if (mime != 'text/jpeg' || mime != 'application/gif') {
       alert('Image only!');
       event.preventDefault();
   }

});

当然，您还需要在服务器上进行验证，此代码只是对启用 JavaScript 的用户的礼貌。

Answer 2

我只会使用 jQuery 验证 jQuery 库，它内置了很多验证，因此您无需担心处理多个条件，而且它非常易于使用。

http://bassistance.de/jquery-plugins/jquery-plugin-validation/

http://docs.jquery.com/Plugins/Validation

Answer 3

你不能用 jQuery 检查文件，你可以检查它是否有正确的扩展名。要检查字段是否为空白，您可以使用：

if ($('#title').val() === '') {
    // error code
}

您可以使用以下内容检查文件扩展名：

var extension = $('input[name=Photo]').val().split('.').pop();
if (extension !== "gif" && extension !== "jpg") {
    // error code
}

我不确定您是否要使用 AJAX 发布文件，但您不必这样做。如果您附加了对表单提交事件的验证，则可以在出现错误时停止表单提交，否则让它提交到服务器。

$('form').submit(function () {
    var error = false;
    // error checking here

    if (error) {
        return false;
    }
});