<İnput type = “file”> öğesinin yalnızca görüntü dosyalarını kabul etmesine nasıl izin verilir?

375

<input type="file">Etiketi kullanarak yalnızca resim dosyası yüklemem gerekiyor .

Şu anda tüm dosya türlerini kabul ediyor. Ama, ben dahil sadece belirli görüntü dosyası uzantıları bunu kısıtlamak istediğiniz .jpg, .gifvb

Bu işlevi nasıl elde edebilirim?

html

— kbvishnu
kaynak

Sunucu tarafında kullanılan teknoloji nedir?

— Erdal

1

kbvishnu, belki de çok uzun zaman önce kabul ettiğiniz cevabı tekrar düşünebilirsiniz. Başka bir yanıtı kabul etmek zorunda değilsiniz. Sadece cevapta aldığımız bayrakların sayısına ve diğer cevaplara kıyasla oy düzeyine dayanarak, belki de en azından kabul etmeyi düşünmelisiniz.

— Aaron Hall

942

Giriş etiketinin kabul etme özelliğini kullanın . Bu nedenle, yalnızca PNG'leri, JPEG'leri ve GIF'leri kabul etmek için aşağıdaki kodu kullanabilirsiniz:

<input type="file" name="myImage" accept="image/x-png,image/gif,image/jpeg" />

Snippet'i genişlet

Ya da sadece:

<input type="file" name="myImage" accept="image/*" />

Snippet'i genişlet

Bunun, tarayıcıya yalnızca kullanıcıya hangi dosya türlerinin görüntüleneceği konusunda bir ipucu verdiğini unutmayın, ancak bu kolayca atlatılabilir, bu nedenle yüklenen dosyayı sunucuda da her zaman doğrulamanız gerekir.

IE 10+, Chrome, Firefox, Safari 6+, Opera 15+'da çalışmalıdır, ancak mobil cihazlarda (2015'ten itibaren) destek çok kabataslaktır ve bazı raporlara göre bu, bazı mobil tarayıcıların herhangi bir şey yüklemesini engelleyebilir, bu nedenle hedef platformlarınızı iyi test ettiğinizden emin olun.

Ayrıntılı tarayıcı desteği için http://caniuse.com/#feat=input-file-accept adresine bakın.

— Madcap güler
kaynak

@madcap accept="file/csv, file/xls"geçerli mi ??

— KNU

19

Emin misin image/x-png? Bu listeye göre, sadece image/png. iana.org/assignments/media-types/media-types.xhtml

— Micros

6

Seçilen cevap bu olmalı! Sadece sunucu tarafını kontrol etmeniz gerektiğini söyleyen bir not yok (destekleyici tarayıcı değil, aynı zamanda güvenlik nedeniyle)

— Erdal G.

1

Muhtemelen cevap cevap olduğunda işe yarıyor, ama sadece denedi ve FF için işe yaramadı. Sadece kabul etmeliyim kabul et = ". Png, .jpg, .jpeg" Örn: jsfiddle.net/DiegoTc/qjsv8ay9/4

— Diego

1

Tamamen güvenmeyin. Diğer dosyaları da kolayca kabul edebilir. Açık dosya penceresinde izin verilen dosya türünü değiştirmeniz yeterlidir.

163

Bunu kullanarak:

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

hem FF hem de Chrome'da çalışır.

— Tyilo
kaynak

14

— Accept

1

hala yerli android tarayıcıda desteklenmiyor, ancak başkalarında iyi çalışıyor sanırım caniuse.com/#feat=input-file-accept

— mcy

Dosya isteminde açılır menü türü "Görüntü Dosyaları" gösterdiğinden bu çözümü seviyorum.

— 18'de

Buna dikkat edin, çünkü istemeyebileceğiniz SVG'lere izin verir.

— stephenmurdoch

Bu, maksimum görüntü dosyalarına izin verir .png, .jpg, .jpeg, .gif, .bmp, .ico, .tiff, .svg, .ai, .psp, .pcd, .pct, .raw. Bu nedenle, özellikle türden bahsetmek daha iyidir.

— Thamarai T

76

Bu şekilde kullanın

<input type="file" accept=".png, .jpg, .jpeg" />

Benim için çalıştı

https://jsfiddle.net/ermagrawal/5u4ftp3k/

— Er. Mohit Agrawal
kaynak

Bu iOS 12 için geçerli değildir. Kullanıcı yine de cihazda video seçebilir.

— user3160227

28

Adımlar:
1. Giriş etiketine kabul niteliği ekleyin
2. Javascript ile doğrulayın
3. İçeriğin gerçekten beklenen bir dosya türü olup olmadığını doğrulamak için sunucu tarafı doğrulaması ekleyin

HTML ve javascript için:

<html>
<body>
<input name="image" type="file" id="fileName" accept=".jpg,.jpeg,.png" onchange="validateFileType()"/>
<script type="text/javascript">
    function validateFileType(){
        var fileName = document.getElementById("fileName").value;
        var idxDot = fileName.lastIndexOf(".") + 1;
        var extFile = fileName.substr(idxDot, fileName.length).toLowerCase();
        if (extFile=="jpg" || extFile=="jpeg" || extFile=="png"){
            //TO DO
        }else{
            alert("Only jpg/jpeg and png files are allowed!");
        }   
    }
</script>
</body>
</html>

Açıklama:

Accept özniteliği, dosya seçici açılır penceresinde görüntülenecek dosyaları filtreler. Ancak, bu bir doğrulama değildir. Tarayıcıya sadece bir ipucu. Kullanıcı yine de açılır pencerede seçenekleri değiştirebilir.
Javascript yalnızca dosya uzantısı için doğrulama yapar, ancak seçme dosyasının gerçek bir jpg veya png olup olmadığını gerçekten doğrulayamaz.
Bu yüzden sunucu tarafında dosya içeriği doğrulaması için yazmak zorundasınız.

— Surya Kameswara Rao Ravi
kaynak

1

en eksiksiz cevap

— paranoidhominid

27

Bu,

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

Ama bu iyi bir yol değil. dosyayı kontrol etmek için sunucu tarafında kod yazmanız gerekir.

Görüntü dosyasının gerçek veya sahte bir görüntü olup olmadığını kontrol edin

if(isset($_POST["submit"])) {
    $check = getimagesize($_FILES["fileToUpload"]["tmp_name"]);
    if($check !== false) {
        echo "File is an image - " . $check["mime"] . ".";
        $uploadOk = 1;
    }
    else {
        echo "File is not an image.";
        $uploadOk = 0;
    }
}

Daha fazla referans için buraya bakın

http://www.w3schools.com/tags/att_input_accept.asp
http://www.w3schools.com/php/php_file_upload.asp

— Ashok Devatwal
kaynak

5

bu dokümanları okumak için bu acceptözelliği kullanabilirsiniz http://www.w3schools.com/tags/att_input_accept.asp<input type="file">

— yussan
kaynak

3

Type = "file" ve accept = "image / *" (veya istediğiniz biçimi) kullanarak, kullanıcının belirli bir biçime sahip bir dosya seçmesine izin verin. Ancak, istemci tarafında yeniden kontrol etmeniz gerekir, çünkü kullanıcı başka dosya türlerini seçebilir. Bu benim için çalışıyor.

<input #imageInput accept="image/*" (change)="processFile(imageInput)" name="upload-photo" type="file" id="upload-photo" />

Ve sonra, javascript betiğinizde

processFile(imageInput) {
    if (imageInput.files[0]) {
      const file: File = imageInput.files[0];
      var pattern = /image-*/;

      if (!file.type.match(pattern)) {
        alert('Invalid format');
        return;
      }

      // here you can do whatever you want with your image. Now you are sure that it is an image
    }
  }

— Mati Cassanelli
kaynak

Bu, en iyi yanıttır, çünkü geliştiricinin izin vermek istedikleri tüm farklı uzantıları belirtmesine gerek kalmadan dosyanın gerçekten bir görüntü olup olmadığını kontrol edecektir

— Adam Marshall

Fikrini anladım. Bu geçerli bir JS sözdizimi const file: File = imageInput.files[0];mi? Ayrıca, girdiye id ataması geleneksel şekilde yapılmaz.

— Ivan P.

Aslında JS değil, daktilo. Blok kodu bir Açısal projeden kopyalandı. Bir javascript dosyasında kullanmak istiyorsanız, tür tanımını (: Dosya)

— Mati Cassanelli

0

Aynı anda birden fazla görüntü yüklemek istiyorsanız, multiplegirişe öznitelik ekleyebilirsiniz .

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

Snippet'i genişlet

— JerryGoyal
kaynak