HTML 表单上传中的过滤器扩展
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/254184/
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
Filter Extensions in HTML form upload
提问by ripper234
I have a simple HTML upload form, and I want to specify a default extension ("*.drp" for example). I've read that the way to do this is through the ACCEPT attribute of the input tag, but I don't know how exactly.
我有一个简单的 HTML 上传表单，我想指定一个默认扩展名（例如“*.drp”）。我读过这样做的方法是通过输入标签的 ACCEPT 属性，但我不知道具体如何。
<form enctype="multipart/form-data" action="uploader.php" method="POST">
Upload DRP File:
<input name="Upload Saved Replay" type="file" accept="*.drp"/><br />
<input type="submit" value="Upload File" />
</form>
EditI know validation is possible using javascript, but I would like the user to only see ".drp" files in his popup dialog. Also, I don't care much about server-side validation in this application.
编辑我知道可以使用 javascript 进行验证，但我希望用户只能在其弹出对话框中看到“.drp”文件。另外，我不太关心这个应用程序中的服务器端验证。
回答by ParaMeterz
For specific formats like yours ".drp ". You can directly pass that in accept=".drp" it will work for that.
对于像你的“.drp”这样的特定格式。你可以直接在 accept=".drp" 中传递它，它会起作用。
But without " * "
但没有“*”
<input name="Upload Saved Replay" type="file" accept=".drp" />
<br/>回答by Nazri
I use javascript to check file extension. Here is my code:
我使用 javascript 来检查文件扩展名。这是我的代码：
HTML
HTML
<input name="fileToUpload" type="file" onchange="check_file()" >
.. ..
……
javascript
javascript
function check_file(){
str=document.getElementById('fileToUpload').value.toUpperCase();
suffix=".JPG";
suffix2=".JPEG";
if(str.indexOf(suffix, str.length - suffix.length) == -1||
str.indexOf(suffix2, str.length - suffix2.length) == -1){
alert('File type not allowed,\nAllowed file: *.jpg,*.jpeg');
document.getElementById('fileToUpload').value='';
}
}
回答by Brian Cline
The accept attribute expects MIME types, not file masks. For example, to accept PNG images, you'd need accept="image/png". You may need to find out what MIME type the browser considers your file type to be, and use that accordingly. However, since a 'drp' file does not appear standard, you mighthave to accept a generic MIME type.
accept 属性需要 MIME 类型，而不是文件掩码。例如，要接受 PNG 图像，您需要 accept="image/png"。您可能需要找出浏览器认为您的文件类型是什么 MIME 类型，并相应地使用它。但是，由于“drp”文件不符合标准，您可能必须接受通用 MIME 类型。
Additionally, it appears that most browsers may not honor this attribute.
此外，似乎大多数浏览器可能不支持此属性。
The better way to filter file uploads is going to be on the server-side. This is inconvenient since the occasional user might waste time uploading a file only to learn they chose the wrong one, but at least you'll have some form of data integrity.
过滤文件上传的更好方法是在服务器端。这是不方便的，因为偶尔的用户可能会浪费时间上传文件只是为了发现他们选择了错误的文件，但至少您将拥有某种形式的数据完整性。
Alternatively you may choose to do a quick check with JavaScript before the form is submitted. Just check the extension of the file field's value to see if it is ".drp". This is probably going to be much more supported than the accept attribute.
或者，您可以选择在提交表单之前使用 JavaScript 进行快速检查。只需检查文件字段值的扩展名，看看它是否是“.drp”。这可能比接受属性得到更多支持。
回答by Diodeus - James MacFarlane
You can do it using javascript. Grab the value of the form field in your submit function, parse out the extension.
您可以使用 javascript 来完成。在提交函数中获取表单字段的值，解析扩展名。
You can start with something like this:
你可以从这样的事情开始：
<form name="someform"enctype="multipart/form-data" action="uploader.php" method="POST">
<input type=file name="file1" />
<input type=button onclick="val()" value="xxxx" />
</form>
<script>
function val() {
alert(document.someform.file1.value)
}
</script>
I agree with alexmac - do it server-side as well.
我同意 alexmac - 在服务器端也这样做。
回答by alexmac
I wouldnt use this attribute as most browsers ignore it as CMS points out.
我不会使用这个属性，因为大多数浏览器会像 CMS 指出的那样忽略它。
By all means use client side validation but only in conjunction with server side. Any client side validation can be got round.
一定要使用客户端验证，但只能与服务器端结合使用。任何客户端验证都可以进行。
Slightly off topic but some people check the content type to validate the uploaded file. You need to be careful about this as an attacker can easily change it and upload a php file for example. See the example at: http://www.scanit.be/uploads/php-file-upload.pdf
稍微偏离主题，但有些人会检查内容类型以验证上传的文件。您需要小心这一点，因为攻击者可以轻松更改它并上传 php 文件等。请参阅以下示例：http: //www.scanit.be/uploads/php-file-upload.pdf
回答by John Topley
The accept attribute specifies a comma-separated list of content types (MIME types) that the target of the form will process correctly. Unfortunately this attribute is ignored by all the major browsers, so it does not affect the browser's file dialog in any way.
accept 属性指定表单目标将正确处理的内容类型（MIME 类型）的逗号分隔列表。不幸的是，所有主要浏览器都忽略了该属性，因此它不会以任何方式影响浏览器的文件对话框。
回答by Alistair R
Another solution with a few lines
几行的另一种解决方案
function checkFile(i){
i = i.substr(i.length - 4, i.length).toLowerCase();
i = i.replace('.','');
switch(i){
case 'jpg':
case 'jpeg':
case 'png':
case 'gif':
// do OK stuff
break;
default:
// do error stuff
break;
}
}
