在HTML表单上传中过滤扩展名

Question

我有一个简单的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>

编辑 我知道使用javascript可以验证,但我希望用户只在他的弹出对话框中看到".drp"文件.此外,我不太关心此应用程序中的服务器端验证.

Answer 1

对于像你这样的特定格式".drp".您可以直接在accept =".drp"中传递它,它将适用于此.

但没有"*"

<input name="Upload Saved Replay" type="file" accept=".drp" />
<br/>

Answer 2

我用javascript来检查文件扩展名.这是我的代码:

HTML

<input name="fileToUpload" type="file" onchange="check_file()" >

.. ..

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='';
        }
    }

Answer 3

accept属性需要MIME类型,而不是文件掩码.例如,要接受PNG图像,您需要accept ="image/png".您可能需要找出浏览器认为您的文件类型是什么MIME类型,并相应地使用它.但是,由于'drp'文件似乎不是标准文件,因此您可能必须接受通用MIME类型.

此外,似乎大多数浏览器可能不尊重此属性.

过滤文件上传的更好方法是在服务器端.这是不方便的,因为偶尔的用户可能会浪费时间上传文件只是为了了解他们选择了错误的文件,但至少你会有某种形式的数据完整性.

或者,您可以选择在提交表单之前使用JavaScript进行快速检查.只需检查文件字段值的扩展名,看它是否为".drp".这可能比accept属性支持得多.