在HTML表单上传filter扩展
我有一个简单的HTML上传表单,我想指定一个默认的扩展名(例如“* .drp”)。 我读过这样做的方式是通过input标签的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>
编辑我知道validation是可能的使用JavaScript,但我希望用户在他的popup对话框中只看到“.drp”文件。 此外,我不太在乎这个应用程序的服务器端validation。
对于像“.drp”这样的特定格式。 你可以直接在accept =“。drp”中传递它,它可以工作。
但没有“*”
<input name="Upload Saved Replay" type="file" accept=".drp" /> <br/>
我使用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=''; } }
accept属性期望MIMEtypes,而不是文件掩码。 例如,要接受PNG图像,您需要接受=“image / png”。 您可能需要找出浏览器认为您的文件types是什么MIMEtypes,并据此使用。 但是,由于“drp”文件不是标准的,所以您可能必须接受通用的MIMEtypes。
另外,看起来大多数浏览器可能不尊重这个属性。
过滤file upload的更好的方法是在服务器端。 这是不方便的,因为偶尔的用户可能会浪费时间上传文件,只是为了学习他们select错误的文件,但至less您会有某种forms的数据完整性。
或者,您可以select在提交表单之前使用JavaScript进行快速检查。 只要检查文件字段的值的扩展名,看它是否是“.drp”。 这可能会比accept属性更受支持。
我不会使用这个属性,因为大多数浏览器忽略它,因为CMS指出。
通过一切手段使用客户端validation,但只能与服务器端一起使用。 任何客户端validation都可以得到。
稍微偏离主题,但有些人检查内容types以validation上传的文件。 你需要小心这个,因为攻击者可以轻易地改变它并上传一个php文件。 请参阅http://www.scanit.be/uploads/php-file-upload.pdf上的示例;
你可以用javascript来做。 在提交函数中获取表单字段的值,parsing出扩展名。
你可以从这样的事情开始:
<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>
我同意alexmac – 做服务器端。
accept属性指定表单的目标将正确处理的内容types(MIMEtypes)的逗号分隔列表。 不幸的是,这个属性被所有主stream浏览器忽略,所以它不会以任何方式影响浏览器的文件对话框。
另有几行解决scheme
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; } }