input type="file"

[Джэксон]

Здравствуйте уважаемые форумчане! Назрела одна проблема с input type="file". Меня интересует как сделать так, чтобы в input можно было добавить только картинку, а другие типы файлов не добавлялись, но при этом вылезал alert с сообщением о том, что юзер не тот файл выбрал. Помогите пожалуйста это реализовать.

[devote]

<input id="file_browse" type="file" name="myfile" />
<script>
    document.getElementById( 'file_browse' ).onchange = function() {

        if ( this.value && !/\.(jpg|jpeg|bmp|gif|png)$/i.test( this.value ) ) {

            alert( "Вы выбрали не тот файл: " + this.value.replace( /\\/g, "/" ).split( '/' ).pop() );

        } else if ( this.value ) {

            alert( "Все ок!" );
        }
    }
</script>

[Джэксон]

о спасибо большое я тут пока сидел думал тоже кое что сообразил.

<input type="file" id="getFile" onchange="poovImg();" name="imagesInp"/>
<script type="text/javascript">
function poovImg() {imageInput=document.getElementById('getFile').value;
if (/[.][jpg,png,gif,JPG,GIF,PNG][^exe,EXE]/.test(imageInput)) {alert('Ok');
}
else { alert('Можно загрузить картинки только в формате *.jpg, *.gif, *.png');
}
}
</script>

[Джэксон]

Можете подсказать, подойдёт такой вариант или нет?

[Aetae]

Сразу видно что в статью по регуляркам вы даже не заглядывали, использовали исключительно подход шамана.

alert([
/[.][jpg,png,gif,JPG,GIF,PNG]/.test( 'aaa.jng' ),
/[.][jpg,png,gif,JPG,GIF,PNG]/.test( 'aaa.ggg' ),
/[.][jpg,png,gif,JPG,GIF,PNG]/.test( 'aaa.ggg.xxx' ),
/[.][jpg,png,gif,JPG,GIF,PNG]/.test( ',,.,,.,,' )
]).join('\n')

[FINoM]

http://wufoo.com/html5/attributes/07-accept.html — может это поможет. Для старых браузеров, конечно, придется писать костыль. Хотя, возможно, есть решение на флеше.

[Джэксон]

Сразу видно что в статью по регуляркам вы даже не заглядывали, использовали исключительно подход шамана.

ну да но как вы считаете такой код имеет право на существование?

[Джэксон]

нет, к сожалению accept="image/*" не подходит Уже пробовал

[lord2kim]

Мне одному кажется дибилизмом давать людям возможность совершить ошибку и потом упрекать их в этом алертом за место того чтобы НЕ ДАТЬ возможность совршить ошибку и сделать так чтобы при обзоре файлов были видны только картинки указав это в специальном атрибуте тега input?

<input type="file" name="img" accept="image/*">

это не будет работать в IE9<

[Deff]

А так ?

<script type="text/javascript">
<!--
function process_form(the_form)
{
	var element_names = new Object()
		element_names["req_file"] = "Файл"

	imageType=document.getElementById('fld1').value.replace(/^\s*.*(\.[^\.\s]*)\s*$/img,'$1');
	imageType=imageType.search(/[\.](?!exe|EXE)(?:jpg|png|gif|JPG|GIF|PNG)$/mg);
	if (imageType!=0) {
		alert('Неверный тип файла,\n Допустимые типы: jpg,png,gif')
		return false;
	}
	if (document.all || document.getElementById)
	{
		for (i = 0; i < the_form.length; ++i)
		{
			var elem = the_form.elements[i]
			if (elem.name && elem.name.substring(0, 4) == "req_")
			{
				if (elem.type && (elem.type=="text" || elem.type=="textarea" || elem.type=="password" || elem.type=="file") && elem.value=='')
				{
					alert("\"" + element_names[elem.name] + "\" это поле обязательно для заполнения в этой форме.")
					elem.focus()
					return false
				}
			}
		}
	}

} // -->
</script>

		<form id="upload_IMG" class="container" method="post" enctype="multipart/form-data" action="/profile.php?action=upload_avatar2&amp;" onsubmit="return process_form(this)">
			<fieldset>
				<legend><span>Укажите файл с изображением для загрузки</span></legend>
				<div class="fs-box">
				<input type="hidden" name="form_sent" value="1" />
				<input type="hidden" name="MAX_FILE_SIZE" value="30480" />
				<p class="fldfile required">
					<label for="fld1">Файл<em>(Обязательно)</em></label><br />
					<span class="input"><input id="fld1" name="req_file" type="file" size="40" /></span>
				</p>
				<p class="infofield">Изображение не может быть больше чем 30480 байт (30 KB).</p>
				</div>
			</fieldset>
			<p class="formsubmit"><input type="submit" class="button" name="upload" value="Загрузить" /></p>
		</form>