Html 如何使输入类型=文件应该只接受pdf和xls
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12142536/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make input type= file Should accept only pdf and xls
提问by Manikandan
I used <input type= "file" name="Upload" >
我用了 <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?
任何人都可以为此举一些例子吗？
回答by feeela
You could do so by using the attribute acceptand 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 类型来实现此目的。但并非所有浏览器都尊重该属性，并且可以通过一些代码检查器轻松删除它。因此，无论哪种情况，您都需要检查服务器端的文件类型（您的第二个问题）。
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 由用户设置。
回答by Radames E. Hernandez
you can use this:
你可以使用这个：
HTML
HTML
<input name="userfile" type="file" accept="application/pdf, application/vnd.ms-excel" />
support only .PDFand .XLSfiles
只支持。PDF和 . XLS文件
回答by Joe C
Unfortunately, there is no guaranteed way to do it at time of selection.
不幸的是，在选择时没有保证的方法。
Somebrowsers support the acceptattribute for inputtags. This is a good start, but cannot be relied upon completely.
一些浏览器支持标签的accept属性input。这是一个好的开始，但不能完全依赖。
<input type="file" name="pic" id="pic" accept="image/gif, image/jpeg" />
<input type="file" name="pic" id="pic" accept="image/gif, image/jpeg" />
You can use a cfinputand run a validation to check the file extensionat 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.
您可以使用 acfinput并运行验证来检查提交时的文件扩展名，但不能检查 mime 类型。这更好，但仍然不是万无一失。OSX 上的文件通常没有文件扩展名，否则用户可能会恶意错误地标记文件类型。
ColdFusion's cffilecan check the mime-type using the contentTypeproperty of the result (cffile.contentType), but that can only be done afterthe upload. This is your best bet, but is still not 100% safe as mime-types could still be wrong.
ColdFusioncffile可以使用contentType结果 ( cffile.contentType)的属性检查 MIME 类型，但这只能在上传后完成。这是您最好的选择，但仍然不是 100% 安全，因为 mime 类型仍然可能是错误的。
回答by lmiguelmh
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 typeand 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。
回答by Alexandre Hitchcox
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。人们可能会入侵您的网站。为了安全起见，做服务器站点。
回答by Jeremy J Starcher
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
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 文件的东西，他们唯一的选择就是下载它们。
回答by Vishal Suthar
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: PDFand XLS
您可以将其更改为：PDF和XLS
You can see it implemented over here: Demo
你可以在这里看到它的实现：Demo
