Как отфильтровать диалог input type="file" по определенному типу файла?

Ответ 1

См. http://www.w3schools.com/tags/att_input_accept.asp:

Атрибут accept поддерживается во всех основных браузерах, кроме Internet Explorer и Safari. Определение и использование

Атрибут accept указывает типы файлов, которые сервер принимает (который может быть отправлен через загрузку файла).

Примечание. Атрибут accept может использоваться только с <input type="file">.

Совет. Не используйте этот атрибут в качестве инструмента проверки. Загрузка файлов должен быть проверен на сервере.

Синтаксис <input accept="audio/*|video/*|image/*|MIME_type" />

Совет. Чтобы указать более одного значения, отделите значения запятой (например, <input accept="audio/*,video/*,image/*" />.

Ответ 2

Это даст правильный (настраиваемый) фильтр, когда отображается диалоговое окно файла:

<input type="file" accept=".jpg, .png, .jpeg, .gif, .bmp, .tif, .tiff|images/*">

Ответ 3

Вы можете использовать атрибут accept вместе с. Он не работает в IE и Safari.

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

Для получения дополнительной информации: http://struts.apache.org/2.0.14/docs/file-upload.html#FileUpload-FileTypes

Ответ 4

Добавьте настраиваемый атрибут в <input type="file" file-accept="jpg gif jpeg png bmp"> и прочитайте имена файлов в javascript, которые соответствуют расширению, предоставленному атрибутом file-accept. Это будет своего рода подделкой, так как текстовый файл с любым из вышеуказанных расширений будет ошибочно ограничен в качестве изображения.

Ответ 5

<asp:FileUpload ID="FileUploadExcel" ClientIDMode="Static" runat="server" />
<asp:Button ID="btnUpload" ClientIDMode="Static" runat="server" Text="Upload Excel File" />

.

$('#btnUpload').click(function () {
    var uploadpath = $('#FileUploadExcel').val();
    var fileExtension = uploadpath.substring(uploadpath.lastIndexOf(".") + 1, uploadpath.length);

    if ($('#FileUploadExcel').val().length == 0) {
        // write error message
        return false;
    }

    if (fileExtension == "xls" || fileExtension == "xlsx") {
        //write code for success
    }
    else {
        //error code - select only excel files
        return false;
    }

});