HTML применить фильтр

Я думаю, что u ищут параметр accept. Попробуйте это работает

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

Он должен использовать MIME_type: Например

<input type="file" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" />

это будет принимать только *.xlsx тип файла...

для списка типов mime проверьте ссылку below:
http://www.bitsandpix.com/entry/microsoft-office-2007-2010-docx-xlsx-pptx-mime-type-to-avoid-the-zip-issue/

вы не можете контролировать, какие файлы можно выбрать, но вы можете прочитать имя файла с помощью javascript после выбора файла. Затем вы можете отобразить предупреждение и / или отключить кнопку отправки, если файл имеет неправильный тип. Однако помните, что вы не можете полагаться на расширение, чтобы сказать вам, действительно ли файл имеет правильный тип. Это должно рассматриваться только как способ помочь пользователям, которые в противном случае могут тратить время на загрузку огромного файла, прежде чем обнаружить, что вы не поддерживаете это тип файла.

вот пример кода для этого. Он использует jQuery, но вы можете сделать то же самое и в обычном javascript.

$(function() {
    $('#inputId').change( function() {
        var filename = $(this).val();
        if ( ! /\.txt$/.test(filename)) {
            alert('Please select a text file');
        }
    });
});

вы можете использовать JavaScript. Примите во внимание, что большой проблемой при выполнении этого с JavaScript является сброс входного файла. Ну, это ограничивает только JPG (для других форматов вам придется изменить тип mime и магическое число):

<form id="form-id">
  <input type="file" id="input-id" accept="image/jpeg"/>
</form>

<script type="text/javascript">
    $(function(){
        $("#input-id").on('change', function(event) {
            var file = event.target.files[0];
            if(file.size>=2*1024*1024) {
                alert("JPG images of maximum 2MB");
                $("#form-id").get(0).reset(); //the tricky part is to "empty" the input file here I reset the form.
                return;
            }

            if(!file.type.match('image/jp.*')) {
                alert("only JPG images");
                $("#form-id").get(0).reset(); //the tricky part is to "empty" the input file here I reset the form.
                return;
            }

            var fileReader = new FileReader();
            fileReader.onload = function(e) {
                var int32View = new Uint8Array(e.target.result);
                //verify the magic number
                // for JPG is 0xFF 0xD8 0xFF 0xE0 (see https://en.wikipedia.org/wiki/List_of_file_signatures)
                if(int32View.length>4 && int32View[0]==0xFF && int32View[1]==0xD8 && int32View[2]==0xFF && int32View[3]==0xE0) {
                    alert("ok!");
                } else {
                    alert("only valid JPG images");
                    $("#form-id").get(0).reset(); //the tricky part is to "empty" the input file here I reset the form.
                    return;
                }
            };
            fileReader.readAsArrayBuffer(file);
        });
    });
</script>

примите во внимание, что это было протестировано на последних версиях Firefox и Chrome, а также на IExplore 10.

полный список типов mime см. В разделе Википедия.

полный список магических чисел см. В Википедии.

вы должны использовать один из плагинов которые используют встроенную вспышку, так как вы не можете сделать это с помощью простого javascript

Я сделал простой способ проверки на стороне клиента для большинства случаев фильтрации файлов. На самом деле все очень просто. Теперь, прежде чем вы пойдете и попытаетесь реализовать это, поймите, что сервер должен проверить этот файл, потому что фильтрация javascript и HTML не является уверенной вещью в случаях, когда кто-то изменяет .js, или даже HTML. Я не включаю все фактические сценарии для простого факта, что мне нравится видеть, как другие реализуют концепции, используя творческий ум, но это шаги Я взял, что, похоже, работает, пока не найду лучший ответ:

создайте объект js, который находит вход и обрабатывает его.

вызовите функцию, такую как OnClientUploadComplete для элемента управления Asyncfileupload AjaxControlToolKit.

внутри этой функции объявите логическую переменную: bIsAccepted(установлено значение false) и string sFileName (после получения имени файла из args).

В if..еще заявление,

if(sFilename.indexOf(".(acceptedExtension1)") ||
   sFileName.indexOf(".(AcceptedExtension2)") )
{
   bIsAccepted = true;
}
else
{
   bIsAccepted = false;
}

затем

if(bIsAccepted)
{
//Process Data
}

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

учитывая, что это можно обойти, изменив имя, чтобы иметь другое расширение файла как часть имени, тип mime также должен быть проверен перед отправкой на сервер для дальнейшей обработки.

            [http://www.webmaster-toolkit.com/mime-types.shtml][1]

надеюсь, что это помогает!

используя MVC, мы можем ограничить загрузку только в zip-файлы

.HtmlAttributes(new { accept = ".zip*" })