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

Как с помощью HTML ограничить типы файлов, которые можно загружать?

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

<form method="post" action="..." enctype="multipart/form-data">
<label for="image">Photo</label>
<input name="image" type="file" />
</form>

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

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

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

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

<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

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

Edited

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

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]);
};

<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 для вашего скрипта без этого ограничения.

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

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

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

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

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