kullandım <input type= "file" name="Upload" >
Şimdi bunu yalnızca .pdf ve .xls dosyalarını kabul ederek sınırlamak istiyorum.
Gönder düğmesine tıkladığımda bunu doğrulamalı.
Web sayfasındaki dosyalara (PDF / XLS) tıkladığımda otomatik olarak açılmalıdır.
Bunun için bir kaç örnek verebilir misiniz?
Yanıtlar:
Özniteliği kullanarak acceptve buna izin verilen mime türlerini ekleyerek bunu yapabilirsiniz. Ancak tüm tarayıcılar bu özelliğe saygı göstermez ve bazı kod denetçileri aracılığıyla kolayca kaldırılabilir. Yani her iki durumda da sunucu tarafında dosya türünü kontrol etmeniz gerekir (ikinci sorunuz).
Misal:
<input type="file" name="upload" accept="application/pdf,application/vnd.ms-excel" />
Üçüncü sorunuza "Ve web sayfasındaki dosyalara (PDF / XLS) tıkladığımda otomatik olarak açılmalıdır.":
Bunu başaramazsınız. İstemci makinede bir PDF veya XLS'nin nasıl açılacağı kullanıcı tarafından belirlenir.
bunu kullanabilirsiniz:
HTML
<input name="userfile" type="file" accept="application/pdf, application/vnd.ms-excel" />
yalnızca destek. PDF ve. XLS dosyaları
Maalesef seçim sırasında bunu yapmanın garantili bir yolu yoktur.
Bazı tarayıcılar etiketler için acceptözniteliği destekler input. Bu iyi bir başlangıçtır, ancak tamamen güvenilemez.
<input type="file" name="pic" id="pic" accept="image/gif, image/jpeg" />
cfinputDosya uzantısını teslim sırasında kontrol etmek için a kullanabilir ve bir doğrulama çalıştırabilirsiniz , ancak mime türünü kullanamazsınız. Bu daha iyi, ama yine de aptalca değil. OSX'teki dosyalar genellikle dosya uzantılarına sahip değildir veya kullanıcılar dosya türlerini kötü niyetle yanlış etiketleyebilir.
ColdFusion , sonucun ( ) özelliğini cffilekullanarak mime türünü kontrol edebilir , ancak bu yalnızca yüklemeden sonra yapılabilir . Bu en iyi bahsinizdir, ancak yine de% 100 güvenli değildir, çünkü mime türleri hala yanlış olabilir.contentTypecffile.contentType
acceptÜzerinde özellik inputetiketi eklenir ama% 100 etkili değildir edilebilir.
JavaScript kullanabilirsiniz. Bunu JavaScript ile yapmanın en büyük probleminin girdi dosyasını sıfırlamak olduğunu göz önünde bulundurun. Bu yalnızca JPG ile sınırlıdır (PDF için mime türünü ve sihirli sayıyı değiştirmeniz gerekecektir ):
<form id="form-id">
<input type="file" id="input-id" accept="image/jpeg"/>
</form>
<script type="text/javascript">
$(function(){
$("#input-id").on('change', function(event) {
var file = event.target.files[0];
if(file.size>=2*1024*1024) {
alert("JPG images of maximum 2MB");
$("#form-id").get(0).reset(); //the tricky part is to "empty" the input file here I reset the form.
return;
}
if(!file.type.match('image/jp.*')) {
alert("only JPG images");
$("#form-id").get(0).reset(); //the tricky part is to "empty" the input file here I reset the form.
return;
}
var fileReader = new FileReader();
fileReader.onload = function(e) {
var int32View = new Uint8Array(e.target.result);
//verify the magic number
// for JPG is 0xFF 0xD8 0xFF 0xE0 (see https://en.wikipedia.org/wiki/List_of_file_signatures)
if(int32View.length>4 && int32View[0]==0xFF && int32View[1]==0xD8 && int32View[2]==0xFF && int32View[3]==0xE0) {
alert("ok!");
} else {
alert("only valid JPG images");
$("#form-id").get(0).reset(); //the tricky part is to "empty" the input file here I reset the form.
return;
}
};
fileReader.readAsArrayBuffer(file);
});
});
</script>
Bunun Firefox ve Chrome'un en son sürümlerinde ve IExplore 10'da test edildiğini göz önünde bulundurun.
Aşağıdaki yolu deneyebilirsin
<input type= "file" name="Upload" accept = "application/pdf,.csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel">
VEYA (asp.net mvc'de)
@Html.TextBoxFor(x => x.FileName, new { @id = "doc", @type = "file", @accept = "application/pdf,.csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" })
Dosya sunucusu tarafını filtreliyorum çünkü Firefox'ta bir kabuk dahil herhangi bir dosyayı yüklemeye izin veren Canlı HTTP Başlıkları gibi araçlar var. İnsanlar sitenizi hackleyebilir. Güvende olmak için sunucu sitesi yapın.
Bu belirli örnek, çoklu dosya yüklemesi için olsa da, ihtiyaç duyulan genel bilgileri verir:
https://developer.mozilla.org/en-US/docs/DOM/File.type
/ Download / üzerine bir dosya üzerinde işlem yapma konusunda bu bir Javascript sorusu değil, bir sunucu yapılandırmasıdır. Bir kullanıcının PDF veya XLS dosyalarını açmak için bir şey yüklemesi yoksa, tek seçeneği onları indirmek olacaktır.
Dosya yükleme kontrolünün, kullanıcının bir düğmeyle yükleyebileceği dosya türlerini sınırlandırmasını istiyorsanız, bu şekilde olur.
<script type="text/JavaScript">
<!-- Begin
function TestFileType( fileName, fileTypes ) {
if (!fileName) return;
dots = fileName.split(".")
//get the part AFTER the LAST period.
fileType = "." + dots[dots.length-1];
return (fileTypes.join(".").indexOf(fileType) != -1) ?
alert('That file is OK!') :
alert("Please only upload files that end in types: \n\n" + (fileTypes.join(" .")) + "\n\nPlease select a new file and try again.");
}
// -->
</script>
Daha sonra, yukarıdaki düğmenin onClick gibi bir olaydan işlevi çağırabilirsiniz, bu şuna benzer:
onClick = "TestFileType (this.form.uploadfile.value, ['gif', 'jpg', 'png', 'jpeg']);"
Bunu şu şekilde değiştirebilirsiniz: PDFveXLS
Burada uygulandığını görebilirsiniz: Demo
accept-Öznitelik ile karşılaştırılırsa , bu yöntem yerel makinede bir dosya seçerken klasör içeriğini seçilen dosya türleriyle sınırlamaz.
Bunu dene:-
<MyTextField
id="originalFileName"
type="file"
inputProps={{ accept: '.xlsx, .xls, .pdf' }}
required
label="Document"
name="originalFileName"
onChange={e => this.handleFileRead(e)}
size="small"
variant="standard"
/>