Html 如何使input type=文件只接受pdf和xls

我用了

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

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

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

---

有人可以举一些例子吗？

您可以使用属性

accept

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

例如：

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

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

---

你不可能做到这一点。如何在客户端计算机上打开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

---

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

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

---

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

不幸的是，在选择时没有保证可以做到这一点

一些浏览器支持

input

标记的

accept

属性。这是一个良好的开端，但不能完全依赖

您可以使用

cfinput

并在提交时运行验证以检查文件扩展名，但不能检查mime类型。这是更好的，但仍然不是傻瓜证明。OSX上的文件通常没有文件扩展名，或者用户可能会恶意地错误标记文件类型

---

ColdFusion的

cffile

可以使用结果的

contentType

属性（

cffile.contentType

）检查mime类型，但这只能在上载后完成。这是您的最佳选择，但仍然不是100%安全，因为mime类型仍然可能是错误的。

我会在服务器端过滤文件，因为Firefox上有一些工具，例如Live HTTP头，允许上载任何文件，包括shell。人们可能会入侵你的网站。为了安全起见，在服务器站点上使用它。

您可以使用JavaScript。考虑到使用JavaScript执行此操作的最大问题是重置输入文件。嗯，这仅限于JPG（对于PDF，您必须更改和）：

$（函数（）{
$（“#输入id”）。关于（'change'，函数（事件）{
var file=event.target.files[0]；
如果（文件大小>=2*1024*1024）{
警报（“最大2MB的JPG图像”）；
$（“#表单id”）.get（0）.reset（）；//棘手的部分是在这里“清空”输入文件，我重置了表单。
返回；
}
如果（！file.type.match（'image/jp.*））{
警报（“仅JPG图像”）；
$（“#表单id”）.get（0）.reset（）；//棘手的部分是在这里“清空”输入文件，我重置了表单。
返回；
}
var fileReader=newfilereader（）；
fileReader.onload=函数（e）{
var int32View=新的Uint8Array（e.target.result）；
//验证这个神奇的数字
//JPG的值为0xFF 0xD8 0xFF 0xE0（参见https://en.wikipedia.org/wiki/List_of_file_signatures)
如果（int32View.length>4&&int32View[0]==0xFF&&int32View[1]==0xD8&&int32View[2]==0xFF&&int32View[3]==0xE0）{
警报（“ok！”）；
}否则{
警报（“仅有效JPG图像”）；
$（“#表单id”）.get（0）.reset（）；//棘手的部分是在这里“清空”输入文件，我重置了表单。
返回；
}
};
readAsArrayBuffer（文件）；
});
});

考虑到这是在最新版本的Firefox和Chrome以及IExplore10上测试的

.

您可以使用：

HTML

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

---

仅支持。PDF和。XLS文件

您可以尝试以下方法

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

试试这个：-

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

this.handleFileRead（e）}
size=“小”
variant=“标准”
/>

请不要根据扩展名检查文件。那么一个名为lolcat.jpg的可执行文件呢？我想phantom42想说的是，您应该检查服务器上的扩展名和MIME类型。可以添加

input

标记上的

accept

属性，但该属性不是100%有效。我100%同意。它不可靠，但我认为它可以作为与cffile.contenttype.Hi幻影结合的第一道防线，正如您所说，此accept仅在chrome中有效，而不是在IE中。是否有其他方法可以做到这一点，所有浏览器都会支持不幸的是，没有；这就是为什么我说它不能被依赖，如果你使用它，它必须与其他方法结合使用。嗨，当我上传文件时，它将存储在服务器中。我听说javascript函数可以通过点击浏览器上的文件来打开.pdf和.xls文件…就是这样！客户机和服务器双方都解释了这一点。如果您在选择框中列出所有文件，回答将非常好。你仍然可以上传任何文件。谢谢Vishal Suthar。我想这个逻辑肯定会帮助我前进。这是我的荣幸。他肯定会的

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

@Html.TextBoxFor(x => x.FileName, new { @id = "doc", @type = "file", @accept = "application/pdf,.csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" })

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