如何容許只接受圖像文件？

時間 2020-03-24

標籤如何容許接受圖像文件简体版

原文原文鏈接

我只須要經過<input type="file">標記上傳圖像文件。 javascript

如今，它接受全部文件類型。可是，我想將其限制爲僅包含.jpg ， .gif等的特定圖像文件擴展名。 php

如何實現此功能？ html

#1樓

使用這個： java

<input type="file" accept="image/*">

在FF和Chrome中都可使用。瀏覽器

#2樓

這樣使用服務器

<input type="file" accept=".png, .jpg, .jpeg" />

對我有用編碼

https://jsfiddle.net/ermagrawal/5u4ftp3k/ spa

#3樓

您能夠對<input type="file">使用accept屬性，請閱讀此文檔http://www.w3schools.com/tags/att_input_accept.asp .net

#4樓

這能夠經過 code

<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;
    }
}

#5樓

腳步：
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>

說明：