我只需要通过<input type="file">标签上传图像文件。
现在,它接受所有的文件类型。但是,我想将其限制为特定的图像文件扩展名,包括.jpg, .gif等。
如何实现这个功能?
我只需要通过<input type="file">标签上传图像文件。
现在,它接受所有的文件类型。但是,我想将其限制为特定的图像文件扩展名,包括.jpg, .gif等。
如何实现这个功能?
当前回答
像这样使用它
<input type="file" accept=".png, .jpg, .jpeg" />
这对我很有效
https://jsfiddle.net/ermagrawal/5u4ftp3k/
其他回答
步骤: 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。 因此,您必须在服务器端编写文件内容验证。
使用type="file"和accept="image/*"(或者你想要的格式),允许用户选择一个特定格式的文件。但是你必须在客户端重新检查,因为用户可以选择其他类型的文件。 这对我很有用。
<input #imageInput accept="image/*" (change)="processFile(imageInput)" name="upload-photo" type="file" id="upload-photo" />
然后,在javascript脚本中
processFile(imageInput) {
if (imageInput.files[0]) {
const file: File = imageInput.files[0];
var pattern = /image-*/;
if (!file.type.match(pattern)) {
alert('Invalid format');
return;
}
// here you can do whatever you want with your image. Now you are sure that it is an image
}
}
如果你想一次上传多张图片,你可以添加多个属性输入。
上传多个文件:<input type="file" multiple accept='image/*'>
只是作为一个补充:如果你想包括所有的现代图像文件类型与最好的跨浏览器支持,它应该是:
<input type="file" accept="image/apng, image/avif, image/gif, image/jpeg, image/png, image/svg+xml, image/webp">
这允许在大多数浏览器中显示的所有图像文件类型,同时排除不太常见的格式,如TIFF或不适合web的格式,如PSD。
你可以添加特定类型的图像或其他文件类型,并在你的代码中进行验证:
<input style="margin-left: 10px; margin-top: 5px;" type="file" accept="image/x-png,image/jpeg,application/pdf"
(change)="handleFileInput($event,'creditRatingFile')" name="creditRatingFile" id="creditRatingFile">
handleFileInput(event) {
console.log(event);
const file = event.target.files[0];
if (file.size > 2097152) {
throw err;
} else if (
file.type !== "application/pdf" &&
file.type !== "application/wps-office.pdf" &&
file.type !== 'application/pdf' && file.type !== 'image/jpg' && file.type !== 'image/jpeg' && file.type !== "image/png"
) {
throw err;
} else {
console.log('file valid')
}
}