HTML: Dosya yüklemesini yalnızca resimlerle nasıl sınırlayabilirim?

HTML ile ne tür dosya türlerinin yüklenebileceğini nasıl sınırlayabilirim?

Kullanıcı deneyimini kolaylaştırmak için dosya yüklemelerini yalnızca resimlerle (jpeg, gif, png) sınırlamak istiyorum.

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

HTML5 diyor <input type="file" accept="image/*">. Elbette, istemci tarafı doğrulamaya asla güvenmeyin: Her zaman sunucu tarafında tekrar kontrol edin ...

HTML5 Dosya girişi, kabul özelliğine ve ayrıca birden çok özelliğe sahiptir. Birden çok öznitelik kullanarak, bir örnekte birden çok görüntü yükleyebilirsiniz.

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

Birden çok mime türünü de sınırlayabilirsiniz.

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

ve dosya nesnesini kullanarak mime türünü kontrol etmenin başka bir yolu.

dosya nesnesi size ad, boyut ve tür verir.

var files=e.target.files;

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

Ayrıca, yukarıdaki kodla kullanıcının bazı dosya türleri için yüklenmesini kısıtlayabilirsiniz.

Düzenlenen

Her şey olması gerektiği gibi olsaydı, bunu "Kabul Et" özniteliğiyle yapabilirsiniz.

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

Ancak, tarayıcılar bunu hemen hemen görmezden gelir, bu yüzden bu önemsizdir. Kısa cevap, bunu HTML ile yapmanın bir yolu olduğunu düşünmüyorum. Bunun yerine sunucu tarafında kontrol etmeniz gerekir.

Aşağıdaki eski gönderi, alternatifler konusunda size yardımcı olabilecek bazı bilgiler içeriyor.

Dosya girişi 'kabul et' özelliği - yararlı mı?

Resim yükleme için HTML burada. Varsayılan olarak, koyduğumuz için görüntü dosyalarını yalnızca göz atma penceresinde gösterecektir accept="image/*". Ancak yine de açılır menüden değiştirebiliriz ve tüm dosyaları gösterecektir. Böylece Javascript bölümü, seçilen dosyanın gerçek bir görüntü olup olmadığını doğrular.

 <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> 

Burada değişiklik olayında önce resmin boyutunu kontrol ediyoruz. Ve ikinci ifdurumda, bir görüntü dosyası olup olmadığını kontrol ederiz.

this.files[0].type.indexOf("image")-1bir resim dosyası değilse olacaktır .

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>

Şimdi html bölümünde

<input type="file" onchange="chng()">

bu kod, yüklenen dosyanın bir jpg dosyası olup olmadığını kontrol edecek ve diğer türlerin yüklenmesini kısıtlayacaktır.

Bunu yalnızca sunucu tarafında güvenli bir şekilde yapabilirsiniz. "Kabul et" özniteliğinin kullanılması iyidir, ancak kullanıcıların bu sınırlama olmaksızın komut dosyanızı cURL yapabilmeleri için sunucu tarafında da doğrulanması gerekir.

Size şunu öneririm: herhangi bir resimsiz dosyayı atın, kullanıcıyı uyarın ve formu yeniden görüntüleyin.

Son olarak, Gözat penceresinde görüntülenen filtre tarayıcı tarafından ayarlanır. Kabul et özniteliğinde istediğiniz tüm filtreleri belirtebilirsiniz, ancak kullanıcınızın tarayıcısının buna uyacağına dair hiçbir garantiniz yoktur.

En iyi bahsiniz, sunucuda arka uçta bir tür filtreleme yapmaktır.

Uploadify adlı bir projeye göz atın. http://www.uploadify.com/

Flash + jQuery tabanlı bir dosya yükleyicidir. Bu, size dosya türlerini filtreleme, aynı anda birden çok dosya seçme vb. Beceriler sağlayan Flash'ın dosya seçme iletişim kutusunu kullanır.