|
|
|
|
|
|
贊助商
分類目錄
贊助商
最新文章
搜索
input type="file" 文件選擇器按鈕只允許選擇圖片的6種方法
作者:admin 時(shí)間:2023-4-17 20:36:9 瀏覽:能否通過<input type="file">標(biāo)簽只允許上傳圖像文件？
現(xiàn)在，它接受所有文件類型。但是，想將其限制為僅特定的圖像文件擴(kuò)展名，包括.jpg、.gif等。
如何實(shí)現(xiàn)此功能？本文介紹一些實(shí)現(xiàn)的方法。
1、使用accept
使用輸入標(biāo)記的accept屬性，若想只接受PNG、JPEG和GIF，可以使用以下代碼：
<input type="file" name="myImage" accept="image/png, image/gif, image/jpeg" />
或者簡單地
<input type="file" name="myImage" accept="image/*" />
也可以使用這個(gè)
<input type="file" accept=".png, .jpg, .jpeg" />
請注意，這只會向?yàn)g覽器提供向用戶顯示哪些文件類型的提示，但這很容易避免，因此你也應(yīng)該始終在服務(wù)器上驗(yàn)證上傳的文件。
它應(yīng)該適用于IE 10+、Chrome、Firefox、Safari 6+、Opera 15+，據(jù)一些報(bào)道，這實(shí)際上可能會阻止一些手機(jī)瀏覽器上傳任何內(nèi)容，所以一定要測試好你的目標(biāo)平臺。
2、使用JavaScript
步驟：
- 將
accept屬性添加到輸入標(biāo)記 - 使用javascript進(jìn)行驗(yàn)證
- 添加服務(wù)器端驗(yàn)證，以驗(yàn)證內(nèi)容是否真的是預(yù)期的文件類型
對于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屬性過濾將在文件選擇器彈出窗口中顯示的文件。然而，這并不是一種驗(yàn)證。這只是對瀏覽器的一個(gè)提示。用戶仍然可以更改彈出窗口中的選項(xiàng)。
javascript只驗(yàn)證文件擴(kuò)展名，但無法真正驗(yàn)證所選文件是實(shí)際的jpg還是png。
因此，你必須在服務(wù)器端編寫文件內(nèi)容驗(yàn)證。
檢查圖像文件是真實(shí)圖像還是偽造圖像（PHP）：
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;
}
}3、使用TypeScript檢查文件是否真的是一個(gè)圖像
使用type="file"和accept="image/*"（或你想要的格式），允許用戶選擇具有特定格式的文件，但你必須在客戶端重新檢查，因?yàn)橛脩艨梢赃x擇其他類型的文件。
HTML
<input #imageInput accept="image/*" (change)="processFile(imageInput)" name="upload-photo" type="file" id="upload-photo" />
TypeScript
processFile(imageInput) {
if (imageInput.files[0]) {
const file: File = imageInput.files[0];
var pattern = /image-*/;
if (!file.type.match(pattern)) {
alert('Invalid format');
return;
}
// 在這里，你可以對你的圖像做任何事情?，F(xiàn)在你確定它是一個(gè)圖像。
}
}這是最好的方法，因?yàn)樗梢詸z查文件是否真的是一個(gè)圖像，而不需要開發(fā)人員指定他們想要允許的所有不同的擴(kuò)展名。
請注意，這不是JS，而是typescript。如果你想在javascript文件中使用它，你必須省略類型定義（:file）。
4、所有跨瀏覽器圖片類型
補(bǔ)充一點(diǎn)：如果你想包括所有具有最佳跨瀏覽器支持的現(xiàn)代圖像文件類型，它應(yīng)該是：
<input type="file" accept="image/apng, image/avif, image/gif, image/jpeg, image/png, image/svg+xml, image/webp">
這允許在大多數(shù)瀏覽器中顯示所有圖像文件類型，同時(shí)排除TIFF等不太常見的格式或PSD等不適合網(wǎng)絡(luò)的格式。
5、動態(tài)判斷文件類型
你可以添加特定類型的圖像或其他文件類型，并在代碼中進(jìn)行驗(yàn)證：
HTML
<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">
JavaScript
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')
}
}6、ReactJS
為ReactJS重構(gòu)了其他人的答案（鉤子）。
import React from 'react';
const ImageUploader = () => {
const handleImageUpload = (e) => {
// If no file selected, return
if (e.target.files.length === 0) return false;
const file = e.target.files[0];
// If no image selected, return
if (!/^image\//.test(file.type)) {
alert(`File ${file.name} is not an image.`);
return false;
}
// ...
};
return (
<>
<input type='file' accept='image/*' onChange={(e) => handleImageUpload(e)} />
</>
);
};
export default ImageUploader;
總結(jié)
本文介紹了6種 <input type="file">文件選擇器按鈕只允許選擇圖片的方法，選擇適合自己的方法，有的應(yīng)用場景不一定需在服務(wù)器端再次驗(yàn)證。
相關(guān)文章
- 站長推薦
