HTML <input type = 'file'> применить фильтр

Question

<input type='file' name='userFile'>

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

• только изображения или .png & .jpg & .gifs
• только служебный файл, например .doc & .docx & .pps

как это сделать ...

Answer 1

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

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

Answer 2

В элементах управления вводом файлов есть атрибут «принять», в котором можно указать типы файлов, которые вы хотите. Однако из того, что я вижу, многие браузеры предпочитают игнорировать его - типы файлов, которые можно указать, являются типами MIME, поэтому строго правильный браузер должен просматривать каждый файл независимо от его расширения и проверять, изображение (и если да, то какой это тип).

Обновление: Кажется, по крайней мере, некоторые версии всех основных браузеров в Windows теперь предоставляют хотя бы некоторую поддержку атрибута accept. (Даже IE поддерживает его, начиная с версии 10.) Однако пока еще рано полагаться на него, поскольку IE 8 и 9 все еще не поддерживают его. И поддержка в целом немного пятнистая.

• Похоже, что в Chrome есть полная поддержка. Он использует свой собственный встроенный список типов, а также системный ... поэтому, если любой из них определяет тип, Chrome знает, какие файлы показывать.
• IE 10 прекрасно поддерживает расширения файлов, а типы MIME - прилично. Кажется, он использует только системное сопоставление типа MIME с расширениями, хотя ... это означает, что если что-то на компьютере пользователя не регистрирует эти расширения с правильными типами MIME, IE не будет показывать файлы этих типов MIME.
• Opera, похоже, поддерживает только типы MIME - до такой степени, что расширения фактически отключают фильтр - и пользовательский интерфейс для селектора файлов отстой. Вы должны выбрать тип, чтобы увидеть файлы этого типа.
• Firefox поддерживает только ограниченный набор типов и игнорирует другие типы и расширения.
• У меня нет Safari, и я не планирую его скачивать. Если кто-то может документировать поддержку Safari ... Частичная поддержка Safari. http://caniuse.com/#search=accept

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

И, конечно же, сервер должен дважды проверить, что файл имеет правильный тип. Расширения файлов - это всего лишь соглашение об именах, и их можно легко подорвать. И даже если бы мы могли доверять браузеру (что мы не можем), и даже если бы он действительно пытался фильтровать что-либо, как вы просили (а это может и не быть), вероятность того, что он действительно подтвердит, что этот файл .doc действительно Документ Word рядом с нулем.

Answer 3

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

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

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

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

Answer 4

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

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

Answer 5

Вы можете использовать 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.

Полный список типов пантомимы см. в Википедии .

.Список магических чисел см. в Википедии .

Answer 6

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

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

Answer 7

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

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

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

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

В операторе if..else

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]

Надеюсь, это поможет!

Answer 8

Вы должны использовать один из плагинов , который использует встроенный Flash, поскольку вы не можете сделать это с простым javascript