<İnput type = “file”> kullanılırken dosya biçimi sınırlandırılsın mı?

Kullanıcı <input type="file">HTML'deki öğedeki Gözat düğmesini tıklattığında yerel işletim sistemi dosya seçicisinden seçilebilecek dosya türünü kısıtlamak istiyorum . Ben imkansız bir his var, ama orada olmadığını bilmek istiyorum olan bir çözüm. Yalnızca HTML ve JavaScript'e bağlı kalmak istiyorum; Flash yok lütfen.

Açıkçası, cevap hayır . Bir geliştirici , kullanıcının herhangi bir türde veya uzantıda dosya yüklemesini engelleyemez.

Ancak yine de, öğesinin accept özelliği <input type = "file">, işletim sisteminin dosya seçimi iletişim kutusunda bir filtre sağlanmasına yardımcı olabilir. Örneğin,

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

.xls veya .xlsx dışındaki dosyaları filtrelemek için bir yol sağlamalıdır. Öğe için MDN sayfası inputher zaman bunu desteklediğini söylese de, sürpriz olarak, bu sürüm 42'ye kadar Firefox'ta benim için işe yaramadı. Bu IE 10+, Edge ve Chrome'da çalışıyor.

IE 10+, Edge, Chrome ve Opera ile birlikte 42'den eski Firefox'u desteklemek için, sanırım MIME türlerinin virgülle ayrılmış listesini kullanmak daha iyidir:

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

[ Edge (EdgeHTML) davranışı: Dosya türü filtresi açılır menüsü, burada belirtilen dosya türlerini gösterir, ancak açılır menüdeki varsayılan değer değildir. Varsayılan filtre şudur All files (*).]

MIME türlerinde yıldız işaretleri de kullanabilirsiniz. Örneğin:

<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, yazarlara özellikte hem MIME türlerini hem de karşılık gelen uzantıları belirtmelerini öneriraccept . Yani, en iyi yaklaşım:

<!-- 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 aynı: burada .

Başvuru: MIME türlerinin listesi

ÖNEMLİ:accept Özniteliğin kullanılması, yalnızca ilgilenilen tür dosyalarına filtre uygulamak için bir yol sağlar. Tarayıcılar yine de kullanıcıların herhangi bir türde dosya seçmesine izin verir. Ek (istemci tarafında) kontroller yapılmalıdır (JavaScript kullanarak, tek yol olacaktır bu ), ve kesinlikle dosya türlerini sunucuda doğrulanacak GEREKİR (dosya uzantısı ve onun ikili imza ikisini de kullanarak MIME tipi bir arada kullanarak, ASP .NET , PHP , Ruby , Java ). Ayrıca dosya türleri ve sihirli numaraları için bu tablolara başvurmak isteyebilirsiniz, daha sağlam bir sunucu tarafı doğrulaması yapmak için.

İşte dosya yüklemeleri ve güvenlik hakkında üç iyi okuma .

DÜZENLEME: İkili imzasını kullanarak dosya türü doğrulaması HTML5 Dosya API'sı kullanılarak JavaScript kullanılarak (yalnızca uzantıya bakmak yerine) istemci tarafında da yapılabilir, ancak yine de dosyanın kötü niyetli bir kullanıcı tarafından doğrulanması gerekir. yine de özel bir HTTP isteği yaparak dosya yükleyebilir.

Giriş etiketi için kabul özelliği vardır. Ancak, hiçbir şekilde güvenilir değildir. Tarayıcılar bunu büyük olasılıkla "öneri" olarak görür, yani kullanıcı, dosya yöneticisine bağlı olarak, yalnızca istenen türleri görüntüleyen bir ön seçime sahip olur. Yine de "tüm dosyalar" ı seçebilir ve istedikleri dosyayı yükleyebilirler.

Örneğin:

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

HTML5 spesifikasyonunda daha fazla bilgi edinin

Yalnızca kullanıcının doğru dosyaları bulmasının "yardım" olarak kullanılması gerektiğini unutmayın. Her kullanıcı istediği herhangi bir talebi sunucunuza gönderebilir. Sunucu tarafındaki her şeyi her zaman doğrulamanız gerekir.

Cevap Yani: hayır sen kısıtlayamaz , ancak olabilir ve ön seçimli set ama olamaz ona bağlı.

Alternatif olarak veya ek olarak, dosya adını (giriş alanının değeri) JavaScript ile kontrol ederek benzer bir şey yapabilirsiniz, ancak bu koruma değildir ve kullanıcı için seçimi kolaylaştırmaz. Bir web yöneticisini yalnızca korunduğunu düşünmesi için kandırır ve bir güvenlik açığı açar. Alternatif dosya uzantılarına (örneğin jpg yerine jpeg), büyük harflere veya hiçbir dosya uzantısına (Linux sistemlerinde yaygın olarak) sahip olan kullanıcılar için eşek için bir acı olabilir.

Sen kullanabilirsiniz changehangi kullanıcı seçer izlemek ve dosya kabul edilebilir olmadığını bu noktada bildirmek üzere olay. Görüntülenen dosyaların gerçek listesini sınırlamaz, ancak desteklenmeyen acceptözelliğin yanı sıra istemci tarafında yapabileceğiniz en yakın dosyadır.

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

Evet haklısın. HTML ile imkansız. Kullanıcı istediği dosyayı seçebilir.

Bir dosyayı uzantısına göre göndermekten kaçınmak için bir parça JavaScript kodu yazabilirsiniz . Ancak bunun kötü niyetli bir kullanıcının gerçekten istediği herhangi bir dosyayı göndermesini engellemeyeceğini unutmayın.

Gibi bir şey:

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

HTML Kodu:

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

Teknik olarak, öğe üzerinde acceptözelliği ( html5'te alternatif ) belirtebilirsiniz input, ancak düzgün desteklenmez.

Kullanım inputiçeren etiketi acceptözniteliği

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

En son tarayıcı uyumluluk tablosu için burayı tıklayın

Burada canlı demo

Yalnızca görüntü dosyalarını seçmek için bunu kullanabilirsiniz accept="image/*"

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

Burada canlı demo

Yalnızca gif, jpg ve png gösterilecek, Chrome 44 sürümünden ekran yakalama

Bunun biraz geç olduğunu biliyorum.

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

Aslında javascript ile yapabilirsiniz, ancak js istemci tarafı olduğunu unutmayın, bu yüzden aslında bazı dosya türlerinden KAÇINMAK (söylediğiniz gibi kısıtlayın veya sınırlayın) gerçekten ne tür dosyaları yükleyebilirsiniz "uyarı" olurdu sunucu tarafı yapın.

Sunucu tarafı doğrulamaya başlamak istiyorsanız bu temel tutuma bakın . Tüm eğitim için bu sayfayı ziyaret edin .

İyi şanslar!

Önceki yanıtlarda belirtildiği gibi, kullanıcıyı yalnızca belirli dosya formatları için dosya seçmeye kısıtlayamayız. Ancak, html'deki dosya özniteliğindeki kabul etiketini kullanmak gerçekten kullanışlıdır.

Doğrulamaya gelince, bunu sunucu tarafında yapmalıyız. Biz de js istemci tarafında yapabiliriz ama kusursuz bir çözüm değil. Sunucu tarafında doğrulama yapmalıyız.

Bu gereksinimler için struts2 Java web uygulaması geliştirme çerçevesini tercih ediyorum. Yerleşik dosya yükleme özelliği ile struts2 tabanlı web uygulamalarına dosya yüklemek çok kolay. Sadece başvurumuzda kabul etmek istediğimiz dosya formatlarını belirtin ve geri kalan her şey çerçevenin özü tarafından halledilir. Struts resmi sitesinde kontrol edebilirsiniz.

Aşağıdakileri önerebilirim:

• Kullanıcıya varsayılan olarak görüntü dosyalarından birini seçmesi gerekiyorsa, use accept = "image / *"

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

• belirli görüntü türleriyle kısıtlamak istiyorsanız, accept = "image / bmp, image / jpeg, image / png" kullanın

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

• belirli türlerle kısıtlamak istiyorsanız accept = ". bmp, .doc, .pdf" kullanın

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

• Kullanıcıyı dosya denetleyicisini tüm dosyalarla değiştiremez, bu nedenle komut dosyasında ve sunucudaki dosya türünü her zaman doğrulayın