我需要上传一个图像文件.我在用<input type="file">.
但是,这会接受所有类型的文件.我需要扩展,如仅文件.jpg,.gif等等.
如何使上传对话框仅允许选择图像文件？
小智 843
使用输入标记的accept属性.因此,要仅接受PNG,JPEG和GIF,您可以使用以下代码:
<input type="file" name="myImage" accept="image/x-png,image/gif,image/jpeg" />或者干脆:
<input type="file" name="myImage" accept="image/*" />请注意,这仅向浏览器提供了向用户显示哪些文件类型的提示,但这很容易被规避,因此您应始终在服务器上验证上载的文件.
它应该适用于IE 10 +,Chrome,Firefox,Safari 6 +,Opera 15+,但支持在手机上非常粗略(截至2015年),有些报道实际上可能会阻止某些移动浏览器上传任何内容,所以一定要好好测试你的目标平台.
有关详细的浏览器支持,请参阅http://caniuse.com/#feat=input-file-accept
Tyi*_*ilo 153
使用这个:
<input type="file" accept="image/*">
适用于FF和Chrome.
Er.*_*wal 73
像这样使用它
<input type="file" accept=".png, .jpg, .jpeg" />
它对我有用
https://jsfiddle.net/ermagrawal/5u4ftp3k/
小智 24
这可以通过以下方式实现
<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
Sur*_*avi 23
步骤:
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>
说明:
Ood*_*Ood 15
作为补充：如果您想包含具有最佳跨浏览器支持的所有现代图像文件类型，则应该是：
<input type="file" accept="image/apng, image/avif, image/gif, image/jpeg, image/png, image/svg+xml, image/webp">
这允许在大多数浏览器中显示的所有图像文件类型，同时排除不太常见的格式（如 TIFF）或不适合 Web 的格式（如 PSD）。
小智 8
使用 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
}
}
小智 8
您可以添加特定类型的图像或其他文件类型并在代码中进行验证：
function handleFileInput(e) {
const [ file ] = e.target.files
if (!file) return
const { size, type } = file
if (size > 2097152) {
throw "too big"
} else if (
type !== "application/pdf" && type !== "application/wps-office.pdf" &&
type !== "image/jpg" && type !== "image/jpeg" && type !== "image/png"
) {
throw "not the right type"
} else {
console.log("file valid")
}
}<input type="file" accept="image/x-png,image/jpeg,application/pdf" onchange="handleFileInput(event)" />| 归档时间： |
|
| 查看次数： |
453019 次 |
| 最近记录： |