135

我用了<input type= "file" name="Upload" >

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

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

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

任何人都可以为此举一些例子吗？

4

9 回答 9

241

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

例子：

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

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

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

于 2012-08-27T13:10:00.933 回答
78

你可以使用这个：

HTML

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

只支持。PDF和 . XLS文件

于 2017-06-02T14:51:53.617 回答
19

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

一些浏览器支持标签的accept属性。input这是一个好的开始，但不能完全依赖。

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

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

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

于 2012-08-27T13:12:46.753 回答
14

您可以尝试以下方式

<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" })
于 2020-10-07T14:39:38.547 回答
5

你可以使用 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 类型的完整列表，请参阅 Wikipedia。

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

于 2015-05-07T22:22:27.840 回答
3

我会过滤服务器端的文件，因为有一些工具，例如 Firefox 上的 Live HTTP Headers，可以上传任何文件，包括 shell。人们可能会入侵您的网站。做它服务器站点，以确保安全。

于 2012-08-27T13:36:25.287 回答
1

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

<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

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

于 2012-08-27T13:10:03.800 回答
1

虽然此特定示例适用于多文件上传，但它提供了需要的一般信息：

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

至于在 /download/ 上对文件进行操作，这不是 Javascript 问题——而是服务器配置。如果用户没有安装任何东西来打开 PDF 或 XLS 文件，他们唯一的选择就是下载它们。

于 2012-08-27T13:10:31.013 回答
-3

试试这个： -

              <MyTextField
                id="originalFileName"
                type="file"
                inputProps={{ accept: '.xlsx, .xls, .pdf' }}
                required
                label="Document"
                name="originalFileName"
                onChange={e => this.handleFileRead(e)}
                size="small"
                variant="standard"
              />
于 2020-11-10T10:33:48.423 回答