HTML: Bagaimana cara membatasi unggahan file menjadi hanya gambar?


126

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>

Jelas, untuk mengamankan ini dengan benar - saya akan memeriksa di sisi backend / server. Tapi yang saya cari hanyalah cara untuk memudahkan pengalaman pengguna sehingga ketika mereka mengeklik "telusuri" untuk menemukan gambar yang ingin mereka unggah, mereka tidak harus melihat semua dokumen kata itu, dll. Yang tidak berlaku untuk unggah
JacobT

Saya tidak tahu apakah Anda dapat menyetel file mask. Saya belum pernah melihatnya berhasil.
Robert K

Jawaban:


230

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


87

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.


4
image/*|audio/*|video/*tidak bekerja untuk saya, itu harus dipisahkan koma tampaknya:image/*,video/mp4,.txt
serg

Bagus untuk memeriksa mimeType! Tx!
Pedro Ferreira


6

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]);
};

Tolong tambahkan penjelasan.
Paul Swetz

Harap dicatat bahwa hal di atas membutuhkan jquery, tetapi tidak mengatakannya. Cukup mudah untuk dipahami, tetapi membantu untuk menyatakannya. Saya membuat biola untuk ini . Itu melakukan beberapa hal lain (seperti yang diperlukan untuk sebuah proyek), tetapi konsepnya sangat mirip.
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>

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


Pemeriksaan ini dikalahkan dengan penggantian nama sederhana dari ekstensi file. Anda setidaknya harus memeriksa jenis URI data jika Anda akan melakukan sesuatu seperti ini.
Lucas Leblanc

1

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.


0

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.


0

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.


30
Flash? ... tidak mungkin!
ErickBest

14
Solusi terburuk yang pernah ada.
Matteo Mosconi

1
Teman-teman, saya tidak mengerti mengapa itu solusi terburuk yang pernah ada. Meskipun Flash sebenarnya akan menghilang, Flash masih digunakan oleh browser lama - sangat tua, oke, tetapi masih digunakan - dan solusi ini memiliki kedua jenis teknologi: jQuery + HTML5 & Flash fallback. Ini sebagus VideoJS, yang memiliki Flash mundur jika browser tidak dapat memutar video ... Saya belum menguji solusinya, ini mungkin bukan yang terbaik, tetapi suara negatifnya tidak adil.
Unapedra

1
+1 Konyol untuk memilih. Flash akan hilang tetapi memiliki fallback yang bagus. Menurut Anda, apa yang digunakan Google untuk gmail untuk penggantian soket? Bodoh.
Jason Sebring

8
Jawabannya adalah 4 tahun. Pada saat itu, dukungan HTML5 untuk pemilihan beberapa file atau pemfilteran jendela file yang dipilih menurut jenis yang diterima tidak didukung dengan baik di salah satu browser utama. Ini adalah solusi yang akan berhasil bagi banyak orang pada saat itu, tetapi saya akan beralih ke solusi HTML5 murni sekarang.
AndrewR
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.