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

Ответ 1

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

Ответ 2

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

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

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

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

и другой способ проверки типа mime с использованием файлового объекта.

file object дает имя, размер и тип.

var files=e.target.files;

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

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

Ответ 3

Edited

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

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

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

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

Атрибут ввода "accept" - полезен ли он?

Ответ 4

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

Ответ 5

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

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

Ответ 6

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

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

Ответ 7

<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 или нет, и ограничивает загрузку других типов

Ответ 8

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

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