我只需要通过<input type="file">标签上传图像文件。
现在,它接受所有的文件类型。但是,我想将其限制为特定的图像文件扩展名,包括.jpg, .gif等。
如何实现这个功能?
我只需要通过<input type="file">标签上传图像文件。
现在,它接受所有的文件类型。但是,我想将其限制为特定的图像文件扩展名,包括.jpg, .gif等。
如何实现这个功能?
当前回答
像这样使用它
<input type="file" accept=".png, .jpg, .jpeg" />
这对我很有效
https://jsfiddle.net/ermagrawal/5u4ftp3k/
其他回答
像这样使用它
<input type="file" accept=".png, .jpg, .jpeg" />
这对我很有效
https://jsfiddle.net/ermagrawal/5u4ftp3k/
这可以通过
<input type="file" accept="image/*" />
但这不是一个好方法。您必须在服务器端编码以检查文件是否为图像。
检查图像文件是真实图像还是假图像
if(isset($_POST["submit"])) {
$check = getimagesize($_FILES["fileToUpload"]["tmp_name"]);
if($check !== false) {
echo "File is an image - " . $check["mime"] . ".";
$uploadOk = 1;
}
else {
echo "File is not an image.";
$uploadOk = 0;
}
}
更多参考,请看这里
http://www.w3schools.com/tags/att_input_accept.asp http://www.w3schools.com/php/php_file_upload.asp
步骤: 1. 为输入标签添加接受属性 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>
解释:
属性中显示的文件进行筛选 弹出文件选择器。然而,它不是一个验证。这只是一个 浏览器提示。中的选项,用户仍然可以更改 弹出。 javascript只验证文件扩展名,但不能 真正验证所选文件是真正的JPG还是png。 因此,您必须在服务器端编写文件内容验证。
在html中;
<input type="file" accept="image/*">
这将接受所有的图像格式,但不接受其他文件,如pdf或视频。
但是如果你使用的是django, django forms.py;
image_field = forms.ImageField(Here_are_the_parameters)
简单而强大的方式(动态接受)
将格式放在数组中,如"image/*"
var上传“上传”= document . getElementById (); var阵列= [/ mp4视频”,“image / p”); 上传. accept =阵列; 上传addEventListener(“change”()= > ' 上传游戏机。log (value)。 ') <输入类型=“文件”id=“上传”>