Як зробити тип введення = файл Потрібно приймати лише pdf та xls


102

я використав <input type= "file" name="Upload" >

Тепер я хотів би обмежити це, приймаючи лише файли .pdf та .xls.

Коли я натискаю кнопку "Відправити", це повинно підтвердити це.

І коли я натискаю файли (PDF / XLS) на веб-сторінці, він повинен автоматично відкриватися.

Хтось може навести кілька прикладів для цього?

Відповіді:


179

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

Приклад:

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

На ваше третє запитання "І коли я натискаю файли (PDF / XLS) на веб-сторінці, він автоматично відкриється.":

Ви не можете цього досягти. Спосіб відкриття PDF або XLS на клієнтській машині встановлюється користувачем.


Привіт, гості, коли я завантажую файли, вони зберігатимуться на сервері. Я чув, що за допомогою функцій javascript можна відкрити файли .pdf та .xls, клацнувши файли в браузері ...
Manikandan

Це воно ! Пояснено обом сторонам клієнт і сервер. Чудова відповідь

3
якщо ви перелічите всі файли у полі вибору. Ви все ще можете завантажити будь-який файл.
rüff0

59

Ви можете використовувати це:

HTML

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

лише підтримка. PDF та. Файли XLS


14

На жаль, немає гарантованого способу зробити це під час відбору.

Деякі браузери підтримують 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-типи все ще можуть бути помилковими.


3
Будь ласка, ніколи не перевіряйте файл на основі розширення. А як щодо виконуваного файлу з іменем lolcat.jpg?
feeela

1
Я думаю, що phantom42 намагається сказати тут, що вам слід перевірити розширення та тип MIME на сервері. acceptАтрибут на inputмітці можуть бути додані , але не 100% ефективним.
Кріс Петерс,

Я на 100% згоден. На це не можна покладатися, але я вважаю, що це нормально, як захист першої лінії у поєднанні з типом cffile.content.
Joe C

Привіт, Phantom! Як ви вже сказали, це прийняття працює лише в chrome, а не в IE. Чи є інший спосіб зробити це, який підтримуватиметься всіма браузерами
Manikandan

На жаль, немає; саме тому я сказав, що на нього не можна покладатися, і він повинен використовуватися разом з іншими методами, якщо ви його взагалі використовуєте.
Joe C

4

Ви можете використовувати JavaScript. Візьміть до уваги, що основною проблемою цього з JavaScript є скидання вхідного файлу. Ну, це обмежується лише 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

Ви можете спробувати наступним чином

<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" })

2

Я відфільтрував би сторону сервера файлів, оскільки в Firefox є такі інструменти, як Live HTTP Headers, які дозволяють завантажувати будь-який файл, включаючи оболонку. Люди можуть зламати ваш сайт. Зробіть це веб-сайтом сервера, щоб бути в безпеці.


Це цілком правда! Будь ласка, не ігноруйте цю пораду
Родні Сальседо

1

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

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

Що стосується дії на файл при / завантаженні /, це не питання Javascript - а швидше конфігурація сервера. Якщо у користувача не встановлено щось для відкриття файлів PDF або XLS, їх єдиним вибором буде їх завантаження.


0

Якщо ви хочете, щоб контроль завантаження файлів обмежував типи файлів, які користувач може завантажувати за допомогою кнопки, тоді це такий спосіб.

<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

Ви можете побачити його реалізацію тут: Демо


Дякую Вішал Сутар. Я думаю, що ця логіка, безсумнівно, допоможе мені йти вперед.
Manikandan

Мені приємно .. Це, безсумнівно, допоможе, але все ще не підтримає… ?? @ Manikandan
Vishal Suthar

Тим не менше, я маю ще один сумнів. Я намагався обмежити файли (лише PDF та Xls.xlsx) у типі вводу = файл. Але це добре працює в Google Chrome .. Але я не можу зробити це в IE. Чи є якесь рішення обмежити файли в IE? Якщо так, будь ласка, змусіть мене піти правильно.
Manikandan

Я щойно перевірив ( codestore.net/store.nsf/unid/DOMM-4Q8H9E ) в IE, і він працює нормально .. @ Manikandan
Vishal Suthar

Порівняно з accept-attribute, цей метод не звужує вміст папки до вибраних типів файлів при виборі файлу на локальній машині.
feeela
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.