Как сделать input type = file Должен принимать только pdf и xls

я использовал <input type= "file" name="Upload" >

Теперь я хотел бы ограничить это, приняв только файлы .pdf и .xls.

Когда я нажимаю кнопку отправки, он должен это подтвердить.

И когда я нажимаю файлы (PDF / XLS) на веб-странице, они должны автоматически открываться.

Может ли кто-нибудь привести несколько примеров для этого?

Вы можете сделать это, используя атрибут acceptи добавив к нему разрешенные типы mime. Но не все браузеры соблюдают этот атрибут, и его можно легко удалить с помощью какого-нибудь инспектора кода. Так что в любом случае вам нужно проверить тип файла на стороне сервера (ваш второй вопрос).

Пример:

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

На ваш третий вопрос «И когда я нажимаю на файлы (PDF / XLS) на веб-странице, они должны открываться автоматически»:

Вы не можете этого добиться. Способ открытия PDF или XLS на клиентском компьютере устанавливается пользователем.

вы можете использовать это:

HTML

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

только поддержка. PDF и. Файлы XLS

К сожалению, во время выбора нет гарантированного способа сделать это.

Некоторые браузеры поддерживают acceptатрибут для inputтегов. Это хорошее начало, но нельзя полностью полагаться на него.

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

Вы можете использовать cfinputи запустить проверку, чтобы проверить расширение файла при отправке, но не mime-тип. Это лучше, но все же не надежно. Файлы в OSX часто не имеют расширений, иначе пользователи могут злонамеренно пометить типы файлов.

ColdFusion cffileможет проверить mime-тип, используя contentTypeсвойство result ( cffile.contentType), но это можно сделать только после загрузки. Это ваш лучший выбор, но он все же не на 100% безопасен, так как mime-типы могут ошибаться.

Вы можете использовать JavaScript. Учтите, что большая проблема при выполнении этого с помощью JavaScript - сбросить входной файл. Что ж, это ограничивается только JPG (для PDF вам нужно будет изменить тип пантомимы и магическое число ):

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

Учтите, что это было протестировано на последних версиях Firefox и Chrome, а также на IExplore 10.

Полный список типов пантомимы см. В Википедии .

Полный список магических чисел см. В Википедии .

Вы можете попробовать следующий способ

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

ИЛИ (в 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" })

Я бы отфильтровал серверную часть файлов, потому что в Firefox есть инструменты, такие как Live HTTP Headers, которые позволяют загружать любой файл, включая оболочку. Люди могут взломать ваш сайт. Сделайте это на сервере, на всякий случай.

Хотя этот конкретный пример предназначен для загрузки нескольких файлов, он дает общую необходимую информацию:

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

Что касается действий с файлом при / download /, это не вопрос Javascript, а скорее конфигурация сервера. Если у пользователя не установлено что-то для открытия файлов PDF или XLS, его единственный выбор - загрузить их.

Если вы хотите, чтобы элемент управления загрузкой файлов ограничивал типы файлов, которые пользователь может загружать одним нажатием кнопки, то это способ ..

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

Затем вы можете вызвать функцию из события, такого как onClick вышеуказанной кнопки, что выглядит так:

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

Вы можете изменить это на: PDFиXLS

Вы можете увидеть, как это реализовано здесь: Демо

Попробуй это:-

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