如何使输入类型 = 文件应该只接受 pdf 和 xls

小开

您可以通过使用属性 accept并向其添加允许的 mime-type 来实现这一点。但是并不是所有的浏览器都尊重这个属性，而且通过一些代码检查器可以很容易地删除这个属性。因此，无论哪种情况，您都需要检查服务器端的文件类型(第二个问题)。

例如:

<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

您可以在这里看到它的实现: 演示

小开

虽然这个特殊的示例用于多个文件上传，但它提供了所需的一般信息:

Https://developer.mozilla.org/en-us/docs/dom/file.type

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

小开

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

一些浏览器支持 input标签的 accept属性。

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

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

ColdFusion 的 cffile可以使用结果的 contentType属性(cffile.contentType)检查哑剧类型，但是这只能在之后上传时进行。这是你最好的选择，但仍然不是100% 安全，因为哑剧类型仍然可能是错误的。

小开

我会过滤服务器端的文件，因为有一些工具，比如 Firefox 上的 Live HTTP Header，允许上传任何文件，包括 shell。人们可能会黑进你的网站。做它服务器网站，为了安全。

小开

你可以用 JavaScript。请注意，使用 JavaScript 执行此操作的最大问题是重置输入文件。好吧，这仅限于 JPG (对于 PDF，你必须改变哑剧类型和神奇的数字) :

<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上进行了测试。

有关哑剧类型的完整列表，请参见 Wikipedia 。

有关魔法数字的完整列表，请参见 Wikipedia 。

小开

你可以用这个:

超文本标示语言

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

OR (在 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" })

小开

试试这个:-

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

小开

将您的 MIME 类型放在 accept属性中

从这里搜索文件扩展名 MIME 类型: Https://developer.mozilla.org/en-us/docs/web/http/basics_of_http/mime_types/common_types