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

126

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

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

<form method="post" action="..." enctype="multipart/form-data">
<label for="image">Photo</label>
<input name="image" type="file" />
</form>
JacobT
источник
Очевидно, чтобы это надежно защитить - я бы проверил на стороне бэкэнда / сервера. Но все, что я ищу, - это простой способ взаимодействия с пользователем, чтобы, когда они нажимают «просмотреть», чтобы найти изображение, которое они хотят загрузить, им не нужно видеть все эти текстовые документы и т. Д., Которые не применимы к загрузить
JacobT
Не знаю, можно ли установить маску файла. Я никогда не видел, чтобы это было удачно.
Роберт К.

Ответы:

230

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

Ms2ger
источник
87

Ввод файла 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

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

Конга Раджу
источник
4
image/*|audio/*|video/*у меня не работает, кажется, его следует разделять запятыми:image/*,video/mp4,.txt
serg 05
Отлично подходит для проверки mimeType! Tx!
Педро Феррейра
6

Edited

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

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

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

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

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

Дэвид
источник
6

Вот 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]);
};
Виниш Путтаниссери
источник
Добавьте объяснение, пожалуйста.
Paul Swetz
Обратите внимание, что приведенное выше требует jquery, но не говорит об этом. Достаточно легко понять, но полезно сформулировать. Я создал для этого скрипку . Он выполняет некоторые другие функции (как требуется для проекта), но концепция во многом такая же.
Dave Land
2
<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 или нет, и ограничивает загрузку других типов

Арун Прабхакаран П.
источник
Эта проверка отменяется простым переименованием расширения файла. Вам следует хотя бы проверить тип URI данных, если вы собираетесь сделать что-то подобное.
Лукас Леблан
1

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

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

Роберт К
источник
0

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

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

Джон Лехович
источник
0

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

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

AndrewR
источник
30
Вспышка? ... никак!
ErickBest 05
14
Худшее решение на свете.
Маттео Москони,
1
Ребята, я не понимаю, почему это худшее решение на свете. Хотя это правда, что Flash исчезнет, ​​он все еще используется старыми браузерами - очень старыми, хорошо, но все еще используется - и это решение имеет оба типа технологий: jQuery + HTML5 и резервный Flash. Это так же хорошо, как VideoJS, у которого есть резервный Flash на случай, если браузер не может воспроизвести видео ... Я не тестировал решение, оно может быть не лучшим, но отрицательные голоса несправедливы.
Unapedra
1
+1 Глупо голосовать против. Flash уходит, но имеет хороший запасной вариант. Как вы думаете, что Google использует для Gmail для отката сокетов? Глупо.
Джейсон Себринг,
8
Этому ответу 4 года. В то время поддержка HTML5 для множественного выбора файлов или фильтрации окна выбора файлов по принятым типам не поддерживалась ни одним из основных браузеров. Это было решение, которое сработало бы для многих в то время, но сейчас я бы перешел к решению на чистом HTML5.
AndrewR