如何输入type = file应该只接受pdf和xls

I used <input type= "file" name="Upload" >

我用

Now I would like to restrict this by accepting only .pdf and .xls files.

现在我想通过只接受.pdf和.xls文件来限制它。

When I click the submit button it should validate this.

当我单击提交按钮时，它应该验证这一点。

And when I click the files (PDF/XLS) on webpage it should automatically open.

当我点击网页上的文件（PDF / XLS）时，它应该会自动打开。

Could anyone please give some examples for this?

有人可以举一些例子吗？

7 个解决方案

#1

You could do so by using the attribute accept and adding allowed mime-types to it. But not all browsers do respect that attribute and it could easily be removed via some code inspector. So in either case you need to check the file type on the server side (your second question).

您可以使用属性accept并向其添加允许的mime-types来实现。但并非所有浏览器都尊重该属性，并且可以通过某些代码检查器轻松删除它。因此，在任何一种情况下，您都需要检查服务器端的文件类型（第二个问题）。

Example:

例：

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

To your third question "And when I click the files (PDF/XLS) on webpage it automatically should open.":

至于你的第三个问题“当我点击网页上的文件（PDF / XLS）时，它会自动打开。”：

You can't achieve that. How a PDF or XLS is opened on the client machine is set by the user.

你无法做到这一点。如何在客户端计算机上打开PDF或XLS由用户设置。

#2

Unfortunately, there is no guaranteed way to do it at time of selection.

不幸的是，在选择时没有保证的方法。

Some browsers support the accept attribute for input tags. This is a good start, but cannot be relied upon completely.

某些浏览器支持输入标记的accept属性。这是一个良好的开端，但不能完全依赖。

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

You can use a cfinput and run a validation to check the file extension at submission, but not the mime-type. This is better, but still not fool-proof. Files on OSX often have no file extensions or users could maliciously mislabel the file types.

您可以使用cfinput并运行验证来检查提交时的文件扩展名，但不检查mime类型。这样更好，但仍然不是万无一失。 OSX上的文件通常没有文件扩展名，或者用户可能会恶意错误地标记文件类型。

ColdFusion's cffile can check the mime-type using the contentType property of the result (cffile.contentType), but that can only be done after the upload. This is your best bet, but is still not 100% safe as mime-types could still be wrong.

ColdFusion的cffile可以使用结果的contentType属性（cffile.contentType）来检查mime类型，但这只能在上传后完成。这是你最好的选择，但仍然不是100％安全，因为mime类型可能仍然是错误的。

#3

you can use this:

你可以用这个：

HTML

HTML

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

support only .PDF and .XLS files

仅支持.PDF和.XLS文件

#4

You could use JavaScript. Take in consideration that the big problem with doing this with JavaScript is to reset the input file. Well, this restricts to only JPG (for PDF you will have to change the mime type and the magic number):

你可以使用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>

Take in consideration that this was tested on latest versions of Firefox and Chrome, and on IExplore 10.

请注意，这是在最新版本的Firefox和Chrome以及IExplore 10上测试过的。

For a complete list of mime types see Wikipedia.

有关mime类型的完整列表，请参阅Wikipedia。

For a complete list of magic number see Wikipedia.

有关幻数的完整列表，请参阅*。

#5

While this particular example is for a multiple file upload, it gives the general information one needs:

虽然这个特殊的例子是用于多文件上传，但它提供了一个需要的一般信息：

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

As far as acting upon a file upon /download/ this is not a Javascript question -- but rather a server configuration. If a user does not have something installed to open PDF or XLS files, their only choice will be to download them.

就在/ download /上执行文件而言，这不是一个Javascript问题 - 而是一个服务器配置。如果用户没有安装某些东西来打开PDF或XLS文件，他们唯一的选择就是下载它们。

#6

I would filter the files server side, because there are tools, such as Live HTTP Headers on Firefox that would allow to upload any file, including a shell. People could hack your site. Do it server site, to be safe.

我会过滤文件服务器端，因为有一些工具，如Firefox上的Live HTTP Headers，可以上传任何文件，包括shell。人们可以破解你的网站。做它服务器站点，是安全的。

#7

If you want the file upload control to Limit the types of files user can upload on a button click then this is the way..

如果您希望文件上传控件限制用户可以在按钮上单击的文件类型，那么这就是方式..

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

You can then call the function from an event like the onClick of the above button, which looks like:

然后，您可以通过上述按钮的onClick等事件调用该函数，如下所示：

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

onClick =“TestFileType（this.form.uploadfile.value，['gif'，'jpg'，'png'，'jpeg']）;”

You can change this to: PDF and XLS

您可以将其更改为：PDF和XLS

You can see it implemented over here: Demo

你可以看到它在这里实现：Demo

#1