Batasi format file saat menggunakan <input type = "file">?

Saya ingin membatasi jenis file yang dapat dipilih dari pemilih file OS asli ketika pengguna mengklik tombol Browse di <input type="file">elemen dalam HTML. Saya punya perasaan itu tidak mungkin, tapi saya ingin tahu apakah ada adalah solusi. Saya hanya ingin tetap menggunakan HTML dan JavaScript; tolong jangan flash.

Sebenarnya, jawabannya adalah tidak . Pengembang tidak dapat mencegah pengguna dari mengunggah file jenis atau ekstensi apa pun.

Namun tetap saja, atribut accept<input type = "file"> dapat membantu menyediakan filter di kotak dialog pilih file OS. Sebagai contoh,

<!-- (IE 10+, Edge (EdgeHTML), Edge (Chromium), Chrome, Firefox 42+) -->
<input type="file" accept=".xls,.xlsx" />

harus menyediakan cara untuk memfilter file selain .xls atau .xlsx. Meskipun halaman MDN untuk inputelemen selalu mengatakan bahwa ia mendukung ini, saya terkejut, ini tidak berfungsi untuk saya di Firefox hingga versi 42. Ini berfungsi di IE 10+, Edge, dan Chrome.

Jadi, untuk mendukung Firefox yang lebih tua dari 42 bersama dengan IE 10+, Edge, Chrome, dan Opera, saya kira lebih baik menggunakan daftar tipe-MIME yang dipisahkan koma:

<!-- (IE 10+, Edge (EdgeHTML), Edge (Chromium), Chrome, Firefox) -->
<input type="file"
 accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel" /> 

Perilaku [ Edge (EdgeHTML): Dropdown filter tipe file menunjukkan tipe file yang disebutkan di sini, tetapi bukan default dalam dropdown. Filter default adalah All files (*).]

Anda juga dapat menggunakan tanda bintang di tipe-MIME. Sebagai contoh:

<input type="file" accept="image/*" /> <!-- all image types --> 
<input type="file" accept="audio/*" /> <!-- all audio types --> 
<input type="file" accept="video/*" /> <!-- all video types --> 

W3C merekomendasikan penulis untuk menentukan tipe MIME dan ekstensi yang sesuai dalam acceptatribut. Jadi, pendekatan terbaik adalah:

<!-- Right approach: Use both file extensions and corresponding MIME-types. -->
<!-- (IE 10+, Edge (EdgeHTML), Edge (Chromium), Chrome, Firefox) -->
<input type="file"
 accept=".xls,.xlsx, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel" /> 

JSFiddle sama: di sini .

Referensi: Daftar tipe-MIME

PENTING: Menggunakan acceptatribut hanya menyediakan cara pemfilteran dalam file tipe yang menarik. Browser masih memungkinkan pengguna untuk memilih file jenis apa pun. Pemeriksaan tambahan (sisi klien) harus dilakukan (menggunakan JavaScript, salah satu caranya adalah ini ), dan pasti jenis file HARUS diverifikasi di server , menggunakan kombinasi tipe MIME menggunakan ekstensi file dan tanda tangan binernya ( ASP) .NET , PHP , Ruby , Java ). Anda mungkin juga ingin merujuk ke tabel ini untuk jenis file dan angka ajaibnya, untuk melakukan verifikasi sisi server yang lebih kuat.

Berikut adalah tiga bacaan yang bagus tentang pengunggahan file dan keamanan.

EDIT: Mungkin verifikasi jenis file menggunakan tanda tangan binernya juga dapat dilakukan di sisi klien menggunakan JavaScript (bukan hanya dengan melihat ekstensi) menggunakan HTML5 File API, tetapi tetap saja, file tersebut harus diverifikasi di server, karena pengguna jahat masih dapat mengunggah file dengan membuat permintaan HTTP khusus.

Ada atribut accept untuk tag input. Namun, itu tidak dapat diandalkan dengan cara apa pun. Peramban kemungkinan besar memperlakukannya sebagai "saran", yang berarti pengguna akan, tergantung pada pengelola file juga, memiliki pilihan awal yang hanya menampilkan jenis yang diinginkan. Mereka masih dapat memilih "semua file" dan mengunggah file apa pun yang mereka inginkan.

Sebagai contoh:

<form>
    <input type="file" name="pic" id="pic" accept="image/gif, image/jpeg" />
</form>

Baca lebih lanjut di spec HTML5

Perlu diingat bahwa itu hanya untuk digunakan sebagai "bantuan" bagi pengguna untuk menemukan file yang tepat. Setiap pengguna dapat mengirim permintaan apa pun yang dia inginkan ke server Anda. Anda selalu harus memvalidasi semua sisi server.

Jadi jawabannya adalah: tidak, Anda tidak dapat membatasi , tetapi Anda dapat mengatur pra-pemilihan tetapi Anda tidak dapat mengandalkannya.

Sebagai alternatif atau tambahan, Anda dapat melakukan sesuatu yang serupa dengan memeriksa nama file (nilai bidang input) dengan JavaScript, tetapi ini tidak masuk akal karena tidak memberikan perlindungan dan juga tidak memudahkan pemilihan bagi pengguna. Itu hanya berpotensi menipu webmaster untuk berpikir bahwa dia dilindungi dan membuka celah keamanan. Ini bisa menyebalkan bagi pengguna yang memiliki ekstensi file alternatif (misalnya jpeg alih-alih jpg), huruf besar, atau tidak ada ekstensi file apa pun (seperti yang biasa terjadi pada sistem Linux).

Anda dapat menggunakan changeacara tersebut untuk memantau apa yang dipilih pengguna dan memberi tahu mereka pada saat itu bahwa file tersebut tidak dapat diterima. Itu tidak membatasi daftar aktual file yang ditampilkan, tetapi ini adalah yang terdekat yang dapat Anda lakukan di sisi klien, selain acceptatribut yang didukung kurang .

var file = document.getElementById('someId');

file.onchange = function(e) {
  var ext = this.value.match(/\.([^\.]+)$/)[1];
  switch (ext) {
    case 'jpg':
    case 'bmp':
    case 'png':
    case 'tif':
      alert('Allowed');
      break;
    default:
      alert('Not allowed');
      this.value = '';
  }
};

<input type="file" id="someId" />

JSFiddle

Ya kamu benar. Tidak mungkin dengan HTML. Pengguna akan dapat memilih file apa pun yang dia inginkan.

Anda bisa menulis sepotong JavaScript kode untuk menghindari pengiriman file berdasarkan ekstensi. Tetapi perlu diingat bahwa ini tidak berarti akan mencegah pengguna jahat untuk mengirimkan file apa pun yang ia inginkan.

Sesuatu seperti:

function beforeSubmit()
{
    var fname = document.getElementById("ifile").value;
    // check if fname has the desired extension
    if (fname hasDesiredExtension) {
        return true;
    } else {
        return false;
    }
}

Kode HTML:

<form method="post" onsubmit="return beforeSubmit();">
    <input type="file" id="ifile" name="ifile"/>
</form>

Secara teknis Anda dapat menentukan acceptatribut (alternatif di html5 ) pada inputelemen, tetapi tidak didukung dengan benar.

Gunakan inputtag dengan acceptatribut

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

Klik di sini untuk tabel kompatibilitas browser terbaru

Demo langsung di sini

Untuk hanya memilih file gambar, Anda dapat menggunakan ini accept="image/*"

<input type="file" name="my-image" id="image" accept="image/*" />

Demo langsung di sini

Hanya gif, jpg, dan png yang akan ditampilkan, ambil layar dari Chrome versi 44

Saya tahu ini agak terlambat.

function Validatebodypanelbumper(theForm)
{
   var regexp;
   var extension =     theForm.FileUpload.value.substr(theForm.FileUpload1.value.lastIndexOf('.'));
   if ((extension.toLowerCase() != ".gif") &&
       (extension.toLowerCase() != ".jpg") &&
       (extension != ""))
   {
      alert("The \"FileUpload\" field contains an unapproved filename.");
      theForm.FileUpload1.focus();
      return false;
   }
   return true;
}

Anda sebenarnya dapat melakukannya dengan javascript tetapi ingat js adalah sisi klien, jadi Anda sebenarnya akan "memperingatkan pengguna" jenis file apa yang dapat mereka unggah, jika Anda ingin MENGHINDARI (membatasi atau membatasi seperti yang Anda katakan) jenis file tertentu yang HARUS DILAKUKAN. lakukan di sisi server.

Lihatlah tut dasar ini jika Anda ingin memulai dengan validasi sisi server. Untuk keseluruhan tutorial, kunjungi halaman ini .

Semoga berhasil!

Seperti disebutkan dalam jawaban sebelumnya, kami tidak dapat membatasi pengguna untuk memilih file hanya untuk format file yang diberikan. Tapi itu sangat berguna untuk menggunakan tag accept pada atribut file dalam html.

Adapun validasi, kita harus melakukannya di sisi server. Kita juga bisa melakukannya di sisi klien dalam js tetapi itu bukan solusi yang mudah. Kita harus memvalidasi di sisi server.

Untuk persyaratan ini saya sangat suka kerangka kerja pengembangan aplikasi web struts2 Java. Dengan fitur unggah file bawaannya, mengunggah file ke aplikasi web berbasis struts2 adalah hal yang mudah. Cukup sebutkan format file yang ingin kami terima di aplikasi kami dan sisanya diurus oleh inti kerangka itu sendiri. Anda dapat memeriksanya di situs resmi struts.

Saya dapat menyarankan berikut:

• Jika Anda harus membuat pengguna memilih salah satu file gambar secara default, gunakan accept = "image / *"

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

• jika Anda ingin membatasi untuk tipe gambar tertentu maka gunakan accept = "image / bmp, image / jpeg, image / png"

  <input type="file" accept="image/bmp, image/jpeg, image/png" />

• jika Anda ingin membatasi untuk tipe tertentu maka gunakan accept = ". bmp, .doc, .pdf"

  <input type="file" accept=".bmp, .doc, .pdf" />

• Anda tidak dapat membatasi pengguna untuk mengubah file filer ke semua file, jadi selalu memvalidasi jenis file dalam skrip dan server