Jak ustawić input type = file Powinien akceptować tylko pliki pdf i xls

użyłem <input type= "file" name="Upload" >

Teraz chciałbym to ograniczyć, akceptując tylko pliki .pdf i .xls.

Kiedy kliknę przycisk przesyłania, powinno to potwierdzić.

Kiedy klikam pliki (PDF / XLS) na stronie internetowej, powinno się to automatycznie otworzyć.

Czy ktoś mógłby podać kilka przykładów na to?

Możesz to zrobić, używając atrybutu accepti dodając do niego dozwolone typy MIME. Jednak nie wszystkie przeglądarki respektują ten atrybut i można go łatwo usunąć za pomocą inspektora kodu. Tak więc w każdym przypadku musisz sprawdzić typ pliku po stronie serwera (drugie pytanie).

Przykład:

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

Na trzecie pytanie „A kiedy klikam pliki (PDF / XLS) na stronie internetowej, powinno się to automatycznie otworzyć”.

Nie możesz tego osiągnąć. Sposób otwierania pliku PDF lub XLS na komputerze klienckim jest ustawiany przez użytkownika.

możesz użyć tego:

HTML

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

tylko wsparcie. PDF i. Pliki XLS

Niestety nie ma zagwarantowanego sposobu, aby to zrobić w momencie wyboru.

Niektóre przeglądarki obsługują acceptatrybut dla inputtagów. To dobry początek, ale nie można na nim całkowicie polegać.

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

Możesz użyć cfinputai uruchomić walidację, aby sprawdzić rozszerzenie pliku podczas przesyłania, ale nie typ MIME. To jest lepsze, ale nadal nie jest niezawodne. Pliki w systemie OSX często nie mają rozszerzeń plików lub użytkownicy mogą złośliwie błędnie oznaczać typy plików.

ColdFusion cffilemogą sprawdzić typ MIME za pomocą contentTypewłaściwości result ( cffile.contentType), ale można to zrobić dopiero po przesłaniu. To najlepszy wybór, ale nadal nie jest w 100% bezpieczny, ponieważ typy mime wciąż mogą się mylić.

Możesz użyć JavaScript. Weź pod uwagę, że dużym problemem przy robieniu tego w JavaScript jest zresetowanie pliku wejściowego. Cóż, ogranicza się to tylko do JPG (w przypadku PDF będziesz musiał zmienić typ MIME i magiczną liczbę ):

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

Weź pod uwagę, że zostało to przetestowane w najnowszych wersjach przeglądarek Firefox i Chrome oraz w IExplore 10.

Pełną listę typów MIME można znaleźć w Wikipedii .

Pełną listę magicznych liczb można znaleźć w Wikipedii .

Możesz spróbować podążać tą drogą

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

LUB (w 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" })

Odfiltrowałbym pliki po stronie serwera, ponieważ istnieją narzędzia, takie jak Live HTTP Headers w przeglądarce Firefox, które pozwoliłyby przesłać dowolny plik, w tym powłokę. Ludzie mogą zhakować Twoją witrynę. Zrób to na serwerze, aby być bezpiecznym.

Chociaż ten konkretny przykład dotyczy przesyłania wielu plików, zawiera ogólne informacje, których potrzebujesz:

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

Jeśli chodzi o działanie na pliku przy / pobieraniu /, nie jest to kwestia Javascript - ale raczej konfiguracja serwera. Jeśli użytkownik nie ma zainstalowanego oprogramowania do otwierania plików PDF lub XLS, jedynym wyborem będzie ich pobranie.

Jeśli chcesz, aby kontrola przesyłania plików ograniczała typy plików, które użytkownik może przesyłać za pomocą kliknięcia przycisku, to jest sposób ...

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

Następnie możesz wywołać funkcję ze zdarzenia takiego jak onClick powyższego przycisku, który wygląda tak:

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

Możesz to zmienić na: PDFiXLS

Możesz to zobaczyć tutaj: Demo

Spróbuj tego:-

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