HTML: Bagaimana cara membatasi unggahan file menjadi hanya gambar?

Dengan HTML, bagaimana cara membatasi jenis file apa yang dapat diunggah?

Untuk memudahkan pengalaman pengguna, saya ingin membatasi unggahan file menjadi hanya gambar (jpeg, gif, png).

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

HTML5 mengatakan <input type="file" accept="image/*">. Tentu saja, jangan pernah percaya validasi sisi klien: Selalu periksa lagi di sisi server ...

Input File HTML5 memiliki atribut terima dan juga beberapa atribut. Dengan menggunakan beberapa atribut, Anda dapat mengupload banyak gambar dalam satu waktu.

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

Anda juga dapat membatasi beberapa jenis pantomim.

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

dan cara lain untuk memeriksa jenis mime menggunakan objek file.

objek file memberi Anda nama, ukuran dan jenis.

var files=e.target.files;

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

Anda juga dapat membatasi pengguna untuk beberapa jenis file untuk diunggah dengan kode di atas.

Diedit

Jika semuanya SEHARUSNYA, Anda dapat melakukan ini melalui atribut "Terima".

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

Namun, browser cukup banyak mengabaikan ini, jadi ini tidak relevan. Jawaban singkatnya adalah, saya rasa tidak ada cara untuk melakukannya di HTML. Anda harus memeriksanya di sisi server.

Posting lama berikut memiliki beberapa informasi yang dapat membantu Anda dengan alternatif.

Input file atribut 'accept' - apakah berguna?

Berikut HTML untuk upload gambar. Secara default akan menampilkan file gambar hanya di jendela browsing karena sudah kita taruh accept="image/*". Tapi kita masih bisa mengubahnya dari dropdown dan itu akan menampilkan semua file. Jadi bagian Javascript memvalidasi apakah file yang dipilih adalah gambar yang sebenarnya atau tidak.

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

Di sini, pada acara perubahan, pertama-tama kami memeriksa ukuran gambar. Dan pada ifkondisi kedua kita cek apakah itu file gambar atau bukan.

this.files[0].type.indexOf("image")akan menjadi -1jika itu bukan file gambar.

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>

Sekarang di bagian html

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

kode ini akan memeriksa apakah file yang diunggah adalah file jpg atau bukan dan membatasi unggahan jenis lain

Anda hanya dapat melakukan ini dengan aman di sisi server. Menggunakan atribut "accept" itu bagus, tetapi juga harus divalidasi di sisi server agar pengguna tidak dapat beralih ke skrip Anda tanpa batasan itu.

Saya menyarankan Anda: membuang file non-gambar, memperingatkan pengguna, dan menampilkan kembali formulir.

Pada akhirnya, filter yang ditampilkan di jendela Jelajah diatur oleh browser. Anda dapat menentukan semua filter yang Anda inginkan di atribut Terima, tetapi Anda tidak memiliki jaminan bahwa browser pengguna Anda akan mematuhinya.

Taruhan terbaik Anda adalah melakukan beberapa jenis pemfilteran di bagian belakang server.

Lihat proyek bernama Uploadify. http://www.uploadify.com/

Ini adalah pengunggah file berbasis Flash + jQuery. Ini menggunakan dialog pemilihan file Flash, yang memberi Anda kemampuan untuk memfilter jenis file, memilih beberapa file sekaligus, dll.