タイトル通りですけどこういうことってよくあります。
特に画像関連は扱わない事が無いくらいですし。
File APIというものを使用するとファイルの種類やファイルサイズを取得することが出来ます。
jqueryから利用できるのでサクっとやってみます。
<script>
$(function() {
$('input[type=file]').after('');
// アップロードするファイルを選択
$('input[type=file]').change(function() {
var file = $(this).prop('files')[0];
// 初期化 submit
$('#submit').removeAttr('disabled');
// 初期化 エラー表示
$('#span').html('');
// [1] 形式チェック
if( file.type == 'image/jpeg' || file.type == 'image/png' || file.type == 'image/gif' )
{
// [2] サイズチェック
if( (file.size / 1024) > 1024 )
{
$('#span').html('ファイルサイズは1024kb以下にしてください');
$('#submit').attr('disabled','disabled');
}
}
else
{
$('#span').html('画像を指定してください');
$('#submit').attr('disabled','disabled');
}
console.log(file1);
});
});
</script>
<form method="post" action="" enctype="multipart/form-data">
<input type="file" name="userfile">
<span id="span"></span>
<input type="submit" id="submit" value="次へ" name="create">
</form>
関連記事