Bagaimana mengizinkan <input type = "file"> untuk hanya menerima file gambar?

376

Saya hanya perlu mengunggah file gambar melalui <input type="file">tag.

Saat ini, ia menerima semua jenis file. Tapi, saya ingin membatasi hanya untuk ekstensi file gambar tertentu yang mencakup .jpg, .gifdll.

Bagaimana saya bisa mencapai fungsi ini?

html kbvishnu
sumber
Apa teknologi yang digunakan di sisi server?
Erdal G.
1
kbvishnu, mungkin Anda bisa mempertimbangkan kembali jawaban yang Anda terima sejak dulu. Anda tidak harus menerima jawaban lain. Saya hanya menyarankan, berdasarkan jumlah bendera yang kami dapatkan pada jawaban dan tingkat suaranya dibandingkan dengan jawaban lain, bahwa mungkin Anda setidaknya harus mempertimbangkan untuk tidak menerimanya.
Aaron Hall

Jawaban:

944

Gunakan atribut accept dari tag input. Jadi, untuk hanya menerima PNG, JPEG, dan GIF, Anda dapat menggunakan kode berikut:

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

Atau sederhananya:

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

Perhatikan bahwa ini hanya memberikan petunjuk kepada browser tentang jenis file apa yang akan ditampilkan kepada pengguna, tetapi ini dapat dengan mudah dielakkan, jadi Anda harus selalu memvalidasi file yang diunggah di server juga.

Ini harus bekerja di IE 10+, Chrome, Firefox, Safari 6+, Opera 15+, tetapi dukungan sangat samar pada ponsel (per 2015) dan oleh beberapa laporan ini sebenarnya dapat mencegah beberapa browser seluler dari mengunggah apa pun, jadi pastikan untuk menguji platform target Anda dengan baik.

Untuk dukungan peramban terperinci, lihat http://caniuse.com/#feat=input-file-accept

madcap tertawa
sumber
@ Ahmadcap accept="file/csv, file/xls"apakah ini valid ??
KNU
19
Apakah kamu yakin itu image/x-png? Menurut daftar ini, itu adil image/png. iana.org/assignments/media-types/media-types.xhtml
Micros
6
Itu harus menjadi jawaban yang dipilih! Hanya saja tidak ada catatan yang mengatakan bahwa Anda masih perlu memeriksa sisi server (karena browser yang tidak mendukung, tetapi juga untuk keamanan)
Erdal G.
1
Mungkin berfungsi ketika jawabannya adalah jawaban, tetapi hanya mencobanya dan tidak berhasil untuk FF. Saya hanya perlu menambahkan accept = ". Png, .jpg, .jpeg" Contoh: jsfiddle.net/DiegoTc/qjsv8ay9/4
Diego
1
Jangan bergantung sepenuhnya pada itu. Itu dapat dengan mudah menerima file lain juga. Anda hanya perlu mengubah jenis file yang diperbolehkan di jendela file terbuka.
164

Menggunakan ini:

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

bekerja di FF dan Chrome.

Tyilo
sumber
14
Atribut accept bukan alat validasi, semua unggahan harus divalidasi di server, selalu ...
TlonXP
1
masih tidak didukung pada browser android asli, tetapi bekerja pada orang lain dengan baik saya kira caniuse.com/#feat=input-file-accept
MCY
Saya suka solusi ini karena pada prompt file jenis dropdown menunjukkan "File Gambar".
hardsetting
Hati-hati dengan ini, karena memungkinkan SVG, yang mungkin tidak Anda inginkan.
stephenmurdoch
Ini akan memungkinkan file gambar maksimum .png, .jpg, .jpeg, .gif, .bmp, .ico, .tiff, .svg, .ai, .psp, .pcd, .pct, .raw. Jadi lebih baik menyebutkan jenis secara spesifik.
Thamarai T
76

Gunakan seperti ini 

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

Ini berhasil untuk saya

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

Er. Mohit Agrawal
sumber
Ini tidak berfungsi untuk iOS 12. Pengguna masih dapat memilih video di perangkat.
user3160227
29

Langkah-langkah:
1. Tambahkan atribut accept ke tag input
2. Validasi dengan javascript
3. Tambahkan validasi sisi server untuk memverifikasi apakah konten benar-benar jenis file yang diharapkan

Untuk HTML dan javascript:

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

Penjelasan:

  1. Atribut accept memfilter file yang akan ditampilkan di popup pemilih file. Namun, ini bukan validasi. Itu hanya petunjuk untuk browser. Pengguna masih dapat mengubah opsi di sembulan.
  2. Javascript hanya memvalidasi untuk ekstensi file, tetapi tidak dapat benar-benar memverifikasi apakah file yang dipilih adalah jpg atau png yang sebenarnya.
  3. Jadi, Anda harus menulis untuk validasi konten file di sisi server.
Surya Kameswara Rao Ravi
sumber
1
jawaban paling lengkap
paranoidhominid
27

Ini bisa dicapai dengan

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

Tapi ini bukan cara yang baik. Anda harus kode di sisi server untuk memeriksa file gambar atau tidak.

Periksa apakah file gambar adalah gambar aktual atau gambar palsu

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

Untuk referensi lebih lanjut, lihat di sini

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

Ashok Devatwal
sumber
3

Menggunakan type = "file" dan accept = "image / *" (atau format yang Anda inginkan), memungkinkan pengguna untuk memilih file dengan format tertentu. Tetapi Anda harus memeriksanya lagi di sisi klien, karena pengguna dapat memilih jenis file lain. Ini bekerja untuk saya.

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

Dan kemudian, dalam skrip javascript Anda

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
sumber
Ini adalah jawaban terbaik, karena akan memeriksa apakah file tersebut benar-benar sebuah gambar tanpa mengharuskan pengembang untuk menentukan semua ekstensi yang ingin mereka izinkan
Adam Marshall
Saya mendapatkan ide Anda. Apakah ini sintaks JS valid: const file: File = imageInput.files[0];? Juga, menetapkan id ke input tidak dilakukan dengan cara konvensional.
Ivan P.
Sebenarnya, bukan JS, ini adalah naskah. Kode blok disalin dari proyek Angular. Jika Anda ingin menggunakannya dalam file javascript, Anda harus menghilangkan definisi tipe (: File)
Mati Cassanelli
0

Jika Anda ingin mengunggah banyak gambar sekaligus, Anda dapat menambahkan multipleatribut ke input. 

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

JerryGoyal
sumber