Как ввести тип ввода = файл Следует принимать только pdf и xls

Ответ 1

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

Пример:

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

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

Вы не можете этого достичь. Как PDF или XLS открывается на клиентской машине, задается пользователем.

Ответ 2

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

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

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

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

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

Ответ 3

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

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

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

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

Ответ 4

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

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

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

Ответ 5

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

Ответ 6

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

HTML

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

. PDF и файлы XLS.

Ответ 7

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

<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

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