Cara membuat input type = file Harus menerima hanya pdf dan xls

Saya dulu <input type= "file" name="Upload" >

Sekarang saya ingin membatasi ini dengan hanya menerima file .pdf dan .xls.

Ketika saya mengklik tombol kirim, itu harus memvalidasi ini.

Dan ketika saya mengklik file (PDF / XLS) di halaman web, itu akan terbuka secara otomatis.

Adakah yang bisa memberi beberapa contoh untuk ini?

Anda dapat melakukannya dengan menggunakan atribut acceptdan menambahkan jenis pantomim yang diizinkan. Tetapi tidak semua browser menghormati atribut itu dan itu dapat dengan mudah dihapus melalui beberapa pemeriksa kode. Jadi dalam kedua kasus, Anda perlu memeriksa jenis file di sisi server (pertanyaan kedua Anda).

Contoh:

<input type="file" name="upload" accept="application/pdf,application/vnd.ms-excel" />

Untuk pertanyaan ketiga Anda "Dan ketika saya mengklik file (PDF / XLS) di halaman web, secara otomatis akan terbuka.":

Anda tidak bisa mencapai itu. Bagaimana PDF atau XLS dibuka di mesin klien diatur oleh pengguna.

Anda dapat menggunakan ini:

HTML

<input name="userfile" type="file" accept="application/pdf, application/vnd.ms-excel" />

dukungan saja. PDF dan. File XLS

Sayangnya, tidak ada cara yang dijamin untuk melakukannya pada saat pemilihan.

Beberapa browser mendukung acceptatribut untuk inputtag. Ini adalah awal yang baik, tetapi tidak dapat diandalkan sepenuhnya.

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

Anda dapat menggunakan cfinputdan menjalankan validasi untuk memeriksa ekstensi file saat pengiriman, tetapi bukan jenis mime. Ini lebih baik, tapi tetap tidak bisa dibilang bodoh. File di OSX sering kali tidak memiliki ekstensi file atau pengguna dapat memberi label yang salah pada jenis file tersebut.

ColdFusion's cffiledapat memeriksa jenis mime menggunakan contentTypeproperti result ( cffile.contentType), tetapi itu hanya dapat dilakukan setelah upload. Ini adalah taruhan terbaik Anda, tetapi masih belum 100% aman karena tipe pantomim masih bisa salah.

Anda bisa menggunakan JavaScript. Pertimbangkan bahwa masalah besar melakukan ini dengan JavaScript adalah mengatur ulang file input. Nah, ini membatasi hanya JPG (untuk PDF Anda harus mengubah jenis mime dan nomor ajaib ):

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

Pertimbangkan bahwa ini telah diuji pada versi terbaru Firefox dan Chrome, dan pada IExplore 10.

Untuk daftar lengkap jenis pantomim lihat Wikipedia .

Untuk daftar lengkap nomor ajaib lihat Wikipedia .

Anda dapat mencoba cara berikut

<input type= "file" name="Upload" accept = "application/pdf,.csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel">

ATAU (di asp.net mvc)

@Html.TextBoxFor(x => x.FileName, new { @id = "doc", @type = "file", @accept = "application/pdf,.csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" })

Saya akan memfilter file di sisi server, karena ada alat, seperti Live HTTP Headers di Firefox yang memungkinkan untuk mengunggah file apa pun, termasuk shell. Orang dapat meretas situs Anda. Lakukan itu situs server, agar aman.

Meskipun contoh khusus ini ditujukan untuk beberapa unggahan file, ini memberikan informasi umum yang dibutuhkan seseorang:

https://developer.mozilla.org/en-US/docs/DOM/File.type

Sejauh bertindak atas file di / download / ini bukan pertanyaan Javascript - melainkan konfigurasi server. Jika pengguna tidak menginstal sesuatu untuk membuka file PDF atau XLS, satu-satunya pilihan mereka adalah mendownloadnya.

Jika Anda ingin kontrol upload file membatasi jenis file yang dapat diupload pengguna dengan satu klik tombol maka inilah caranya ..

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

Anda kemudian dapat memanggil fungsi dari event seperti onClick tombol di atas, yang terlihat seperti:

onClick = "TestFileType (this.form.uploadfile.value, ['gif', 'jpg', 'png', 'jpeg']);"

Anda dapat mengubahnya menjadi: PDFdanXLS

Anda dapat melihatnya diimplementasikan di sini: Demo

Coba yang ini:-

              <MyTextField
                id="originalFileName"
                type="file"
                inputProps={{ accept: '.xlsx, .xls, .pdf' }}
                required
                label="Document"
                name="originalFileName"
                onChange={e => this.handleFileRead(e)}
                size="small"
                variant="standard"
              />