HTML: Как ограничить загрузку файлов только изображениями?

HTML5 говорит <input type="file" accept="image/*">. Конечно, никогда не доверяйте проверке на стороне клиента: всегда проверяйте еще раз на стороне сервера ...

Ввод файла HTML5 имеет атрибут accept, а также множественный атрибут. Используя несколько атрибутов, вы можете загружать несколько изображений в один экземпляр.

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

Вы также можете ограничить использование нескольких типов пантомимы.

<input type="file" multiple accept="image/*,audio/*,video/*">

и другой способ проверки типа MIME с помощью файлового объекта.

файловый объект дает вам имя, размер и тип.

var files=e.target.files;

var mimeType=files[0].type; // You can get the mime type

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

Отредактировано

Если бы все было так, как ДОЛЖНО, вы могли бы сделать это с помощью атрибута «Принять».

http://www.webmasterworld.com/forum21/6310.htm

Однако браузеры в значительной степени игнорируют это, так что это несущественно. Короткий ответ: я не думаю, что есть способ сделать это в HTML. Вместо этого вам нужно будет проверить это на стороне сервера.

В следующем более старом посте есть некоторая информация, которая может помочь вам с альтернативами.

Атрибут 'accept' ввода файла - это полезно?

Вот HTML для загрузки изображения. По умолчанию файлы изображений будут отображаться только в окне просмотра, потому что мы поместили accept="image/*". Но мы все равно можем изменить его в раскрывающемся списке, и он покажет все файлы. Таким образом, часть Javascript проверяет, является ли выбранный файл фактическим изображением.

 <div class="col-sm-8 img-upload-section">
     <input name="image3" type="file" accept="image/*" id="menu_images"/>
     <img id="menu_image" class="preview_img" />
     <input type="submit" value="Submit" />
 </div> 

Здесь, в событии изменения, мы сначала проверяем размер изображения. И во втором if условии мы проверяем, является ли это файлом изображения.

this.files[0].type.indexOf("image") будет -1, если это не файл изображения.

document.getElementById("menu_images").onchange = function () {
    var reader = new FileReader();
    if(this.files[0].size>528385){
        alert("Image Size should not be greater than 500Kb");
        $("#menu_image").attr("src","blank");
        $("#menu_image").hide();  
        $('#menu_images').wrap('<form>').closest('form').get(0).reset();
        $('#menu_images').unwrap();     
        return false;
    }
    if(this.files[0].type.indexOf("image")==-1){
        alert("Invalid Type");
        $("#menu_image").attr("src","blank");
        $("#menu_image").hide();  
        $('#menu_images').wrap('<form>').closest('form').get(0).reset();
        $('#menu_images').unwrap();         
        return false;
    }   
    reader.onload = function (e) {
        // get loaded data and render thumbnail.
        document.getElementById("menu_image").src = e.target.result;
        $("#menu_image").show(); 
    };

    // read the image file as a data URL.
    reader.readAsDataURL(this.files[0]);
};

Вот что я успешно использую:

...
<div class="custom-file">
    <input type="file" class="custom-file-input image-gallery" id="image-gallery" name="image-gallery[]" multiple accept="image/*">
   <label class="custom-file-label" for="image-gallery">Upload Image(s)</label>
</div>
...

Всегда рекомендуется проверять фактический тип файла и на стороне сервера.

<script>

    function chng()
    {
        var typ=document.getElementById("fiile").value;
        var res = typ.match(".jp");

        if(res)
        {
            alert("sucess");
        }
        else
        {
            alert("Sorry only jpeg images are accepted");
            document.getElementById("fiile").value="; //clear the uploaded file
        }
    }

</script>

Теперь в html-части

<input type="file" onchange="chng()">

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

Вы можете сделать это безопасно только на стороне сервера. Использование атрибута accept - это хорошо, но он также должен быть проверен на стороне сервера, чтобы пользователи не могли использовать cURL для вашего скрипта без этого ограничения.

Я предлагаю вам: удалить все файлы, не являющиеся изображениями, предупредить пользователя и повторно отобразить форму.

Поскольку <input type="file" id="fileId" accept="image/*"> не может гарантировать, что кто-то выберет изображение, вам понадобится такая проверка:

if(!(document.getElementById("fileId").files[0].type.match(/image.*/))){
                alert('You can\'t upload this type of file.');
                return;
}

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

Лучше всего выполнить какую-то фильтрацию в бэкэнде на сервере.

Оформить заказ на проект под названием Uploadify. http://www.uploadify.com/

Это загрузчик файлов на основе Flash + jQuery. При этом используется диалоговое окно выбора файла Flash, которое дает вам возможность фильтровать типы файлов, выбирать несколько файлов одновременно и т. Д.