在swal sweetalert中接受多种文件类型,可以通过以下步骤实现:
<input type="file">
标签来实现。File
对象的type
属性来获取文件类型。URL.createObjectURL()
方法将文件转换为URL,然后在弹窗中显示图片预览;如果是文本文件,可以读取文件内容并在弹窗中显示。以下是一个示例代码,演示如何在swal sweetalert中接受多种文件类型:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11.0.18/dist/sweetalert2.min.css">
</head>
<body>
<input type="file" id="fileInput">
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.0.18/dist/sweetalert2.all.min.js"></script>
<script>
const fileInput = document.getElementById('fileInput');
fileInput.addEventListener('change', (event) => {
const file = event.target.files[0];
if (file) {
const fileType = file.type;
if (fileType.startsWith('image/')) {
const imageUrl = URL.createObjectURL(file);
Swal.fire({
title: 'Image Preview',
imageUrl: imageUrl,
imageAlt: 'Preview',
showCancelButton: true,
confirmButtonText: 'Upload',
cancelButtonText: 'Cancel'
}).then((result) => {
if (result.isConfirmed) {
// 上传图片的逻辑
}
});
} else if (fileType.startsWith('text/')) {
const reader = new FileReader();
reader.onload = (e) => {
const fileContent = e.target.result;
Swal.fire({
title: 'Text Content',
text: fileContent,
showCancelButton: true,
confirmButtonText: 'Upload',
cancelButtonText: 'Cancel'
}).then((result) => {
if (result.isConfirmed) {
// 上传文本的逻辑
}
});
};
reader.readAsText(file);
} else {
Swal.fire({
icon: 'error',
title: 'Unsupported File Type',
text: 'Please select a valid file type.'
});
}
}
});
</script>
</body>
</html>
在上述示例代码中,根据文件类型的不同,分别处理了图片文件和文本文件。对于其他类型的文件,弹出一个错误提示框。
请注意,上述示例代码中没有提及具体的腾讯云产品和链接地址,因为要求答案中不能提及亚马逊AWS、Azure、阿里云、华为云、天翼云、GoDaddy、Namecheap、Google等流行的一些云计算品牌商。如需使用腾讯云相关产品,可以根据具体需求选择适合的产品,例如对象存储(COS)用于存储文件,或者云函数(SCF)用于处理文件上传逻辑等。具体的腾讯云产品和链接地址,请参考腾讯云官方文档。
领取专属 10元无门槛券
手把手带您无忧上云