input type="file"
Здравствуйте уважаемые форумчане! Назрела одна проблема с input type="file". Меня интересует как сделать так, чтобы в input можно было добавить только картинку, а другие типы файлов не добавлялись, но при этом вылезал alert с сообщением о том, что юзер не тот файл выбрал. Помогите пожалуйста это реализовать.:)
|
<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>
|
Можете подсказать, подойдёт такой вариант или нет?
|
Сразу видно что в статью по регуляркам вы даже не заглядывали, использовали исключительно подход шамана.
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')
|
http://wufoo.com/html5/attributes/07-accept.html — может это поможет. Для старых браузеров, конечно, придется писать костыль. Хотя, возможно, есть решение на флеше.
|
Цитата:
|
нет, к сожалению accept="image/*" не подходит :( Уже пробовал
|
Цитата:
<input type="file" name="img" accept="image/*"> это не будет работать в IE9< |
А так ?
<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&" 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>
|
| Часовой пояс GMT +3, время: 04:41. |