我只需要通过<input type="file">标签上传图像文件。
现在，它接受所有文件类型。但是，我想将它限制为仅特定的图像文件的扩展名，其中包括.jpg，.gif等等。
如何实现此功能？
如何允许<input type =“ file”>仅接受图像文件？
步骤：
1.将accept属性添加到输入标签
2.使用javascript
进行验证3.添加服务器端验证以验证内容是否确实是预期的文件类型
对于HTML和javascript：
<html>
<body>
<input name="image" type="file" id="fileName" accept=".jpg,.jpeg,.png" onchange="validateFileType()"/>
<script type="text/javascript">
function validateFileType(){
var fileName = document.getElementById("fileName").value;
var idxDot = fileName.lastIndexOf(".") + 1;
var extFile = fileName.substr(idxDot, fileName.length).toLowerCase();
if (extFile=="jpg" || extFile=="jpeg" || extFile=="png"){
//TO DO
}else{
alert("Only jpg/jpeg and png files are allowed!");
}
}
</script>
</body>
</html>
说明：
- accept属性过滤将在文件选择器弹出窗口中显示的文件。但是，这不是验证。这只是浏览器的提示。用户仍然可以在弹出窗口中更改选项。
- javascript仅验证文件扩展名，而不能真正验证所选文件是实际的jpg还是png。
- 因此，您必须在服务器端编写文件内容验证。
这样使用
<input type="file" accept=".png, .jpg, .jpeg" />
对我有用
使用输入标签的accept属性。因此，仅接受PNG，JPEG和GIF可以使用以下代码：
<input type="file" name="myImage" accept="image/x-png,image/gif,image/jpeg" />或者简单地：
<input type="file" name="myImage" accept="image/*" />Note that this only provides a hint to the browser as to what file-types to display to the user, but this can be easily circumvented, so you should always validate the uploaded file on the server also.
It should work in IE 10+, Chrome, Firefox, Safari 6+, Opera 15+, but support is very sketchy on mobiles (as of 2015) and by some reports this may actually prevent some mobile browsers from uploading anything at all, so be sure to test your target platforms well.
For detailed browser support, see http://caniuse.com/#feat=input-file-accept
您可以使用accept属性<input type="file">阅读此文档http://www.w3schools.com/tags/att_input_accept.asp
使用这个：
<input type="file" accept="image/*">
在FF和Chrome中均可使用。
这可以通过
但这不是一个好方法。您必须在服务器端进行编码以检查文件是否为图像。
检查图像文件是真实图像还是伪图像
有关更多参考，请参见此处
http://www.w3schools.com/tags/att_input_accept.asp
http://www.w3schools.com/php/php_file_upload.asp