限制上傳文件格式

先看看頁面效果：

下面一起來看看具體代碼是什么醬紫的：

<!DOCTYPE html>
<html>

<head>
    <title>上傳文件只能上傳圖片</title>
</head>

<body>
    <input class="upload-file-img" type="file" name="file" id="personsFile" multiple="multiple" accept="image/*" onchange="uploadImg()" />
</body>
<script type="text/javascript">
function uploadImg() {
    var _name, _fileName, personsFile;
    personsFile = document.getElementById("personsFile");
    _name = personsFile.value;
    _fileName = _name.substring(_name.lastIndexOf(".") + 1).toLowerCase();
    if (_fileName !== "png" && _fileName !== "jpg") {
        alert("上傳圖片格式不正確，請重新上傳");
    }
}
</script>

</html>

圖片回顯

順便看看怎么實現圖片回顯：

效果圖：

代碼：

<!DOCTYPE html>
<html>

<head>
    <title>上傳文件只能上傳圖片</title>
</head>

<body>
    <input class="upload-file-img" type="file" name="file" id="personsFile" multiple="multiple" accept="image/*" onchange="uploadImg()" />
    <img id="showImg" style="width: 100px;height: 100px">
</body>
<script type="text/javascript">
function uploadImg() {
    var _name, _fileName, personsFile;
    personsFile = document.getElementById("personsFile");
    _name = personsFile.value;
    _fileName = _name.substring(_name.lastIndexOf(".") + 1).toLowerCase();
    if (_fileName !== "png" && _fileName !== "jpg") {
        alert("上傳圖片格式不正確，請重新上傳");
    } else {
        document.getElementById("showImg").src = window.URL.createObjectURL(personsFile.files[0]);
    }
}
</script>

</html>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 vsftpd只能連接不能上傳文件問題 ajaxFileUpload只能上傳一次，和上傳同名圖片不能上傳等bug問題文件大小限制問題，限制上傳文件功能只能上傳指定大小的文件 uploadify3.2.1 多文件上傳總是只能上傳一個文件 plupload如何限制上傳文件數量，限制只能上傳單個文件 vsftpd匿名用戶只能上傳不能下載 vsftpd限制用戶只能上傳不能下載關於ajaxFileUpload只能上傳一次的解決 vue用阿里雲oss上傳圖片使用分片上傳只能上傳100kb以內的解決辦法 element ui實現手動上傳文件，且只能上傳單個文件，並能覆蓋上傳