как кто-то может ограничить файлы, которые можно выбрать с помощью элемента input type="file" с помощью расширений...?
Я уже знаю атрибут accept, но в chrome он ограничивает файлы с помощью последнего определяемого MIME-типа (в данном случае "gif" ), а FF4 даже не ограничивает ничего.
<input type="file" accept="image/jpg, image/gif">
Я делаю что-то неправильно? Или есть другой способ?
Твой для любого совета...
Честно говоря, лучший способ ограничить файлы - на стороне сервера. Люди могут обманывать тип файла на клиенте, поэтому берут полное имя файла во время передачи сервера, разбирают тип файла, а затем возвращают сообщение, как правило, лучший вариант.
Легкий способ сделать это:
<input type="file" accept=".gif,.jpg,.jpeg,.png,.doc,.docx">
Работает со всеми браузерами, кроме IE9. Я не тестировал его в IE10 +.
ПРИМЕЧАНИЕ. Этот ответ с 2011 года. Это был действительно хороший ответ, но с 2015 года собственные свойства HTML поддерживаются большинством браузеров, поэтому там (как правило) нет необходимости реализовывать такая пользовательская логика в JS. См. ответ Edi и документы.
Перед загрузкой файла вы можете проверить расширение файла с помощью Javascript и предотвратить отправку формы, если она не соответствует. Имя загружаемого файла сохраняется в поле "значение" элемента формы.
Вот простой пример, который позволяет загружать только файлы, заканчивающиеся на ".gif":
<script type="text/javascript">
function checkFile() {
var fileElement = document.getElementById("uploadFile");
var fileExtension = "";
if (fileElement.value.lastIndexOf(".") > 0) {
fileExtension = fileElement.value.substring(fileElement.value.lastIndexOf(".") + 1, fileElement.value.length);
}
if (fileExtension.toLowerCase() == "gif") {
return true;
}
else {
alert("You must select a GIF file for upload");
return false;
}
}
</script>
<form action="upload.aspx" enctype="multipart/form-data" onsubmit="return checkFile();">
<input name="uploadFile" id="uploadFile" type="file" />
<input type="submit" />
</form>
Однако этот метод не является надежным. Шон Хадди прав, что вы всегда хотите проверить на стороне сервера, потому что пользователи могут победить вашу проверку Javascript, отключив javascript или отредактировав свой код после его поступления в свой браузер. Определенно проверьте серверную сторону в дополнение к проверке на стороне клиента. Кроме того, я рекомендую также проверить размер серверной части, чтобы пользователи не разбивали ваш сервер с файлом размером 2 ГБ (я не знаю, как проверить размер файла на стороне клиента, не используя Flash или Java-апплет или что-то еще).
Однако проверка клиентской стороны перед использованием метода, который я здесь привел, по-прежнему полезен, поскольку он может предотвращать ошибки и является незначительным сдерживающим фактором для несерьезного вреда.
function uploadFile() {
var fileElement = document.getElementById("fileToUpload");
var fileExtension = "";
if (fileElement.value.lastIndexOf(".") > 0) {
fileExtension = fileElement.value.substring(fileElement.value.lastIndexOf(".") + 1, fileElement.value.length);
}
if (fileExtension == "odx-d"||fileExtension == "odx"||fileExtension == "pdx"||fileExtension == "cmo"||fileExtension == "xml") {
var fd = new FormData();
fd.append("fileToUpload", document.getElementById('fileToUpload').files[0]);
var xhr = new XMLHttpRequest();
xhr.upload.addEventListener("progress", uploadProgress, false);
xhr.addEventListener("load", uploadComplete, false);
xhr.addEventListener("error", uploadFailed, false);
xhr.addEve`enter code here`ntListener("abort", uploadCanceled, false);
xhr.open("POST", "/post_uploadReq");
xhr.send(fd);
}
else {
alert("You must select a valid odx,pdx,xml or cmo file for upload");
return false;
}
}
попробовал это, работает очень хорошо