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

Ви також можете обмежити користувача для завантаження деяких типів файлів за вказаним вище кодом.

Відредаговано

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

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, але ви не маєте гарантії, що браузер вашого користувача буде його дотримуватися.

Ваша найкраща ставка - зробити якусь фільтрацію в задньому куті на сервері.

Оформити замовлення проекту під назвою Uploadify. http://www.uploadify.com/

Це завантажувач файлів на базі Flash + jQuery. Тут використовується діалогове вікно вибору файлів Flash, яке дає можливість фільтрувати типи файлів, обирати декілька файлів одночасно тощо.