1

jquery を使用して画像アップロード フォーラムを検証して投稿する方法を知りたいです。入力は、タイトルと画像の 2 つだけです。このフィールドのいずれかが空の場合、またはアップロードされたファイルの形式が間違っている場合は、エラーを返す必要があります。これが私が持っているコードです（これは現時点ではjqueryを使用していません。）

Image.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>
4

3 に答える 3

0

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;
    }
});
于 2012-09-10T16:36:27.143 に答える
0

jQuery検証を使用するだけです。jQueryライブラリには多くの検証が組み込まれているため、複数の条件の処理について心配する必要はなく、非常に使いやすいです。

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

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

于 2012-09-10T16:50:17.720 に答える
0

拡張機能で検証できます...

$('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 が有効なユーザーへの礼儀に過ぎません。

于 2012-09-10T16:45:49.267 に答える