限制上传文件格式

先看看页面效果：

下面一起来看看具体代码是什么酱紫的：

<!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删除。

猜您在找 文件大小限制问题，限制上传文件功能只能上传指定大小的文件 plupload如何限制上传文件数量，限制只能上传单个文件 elementui实现只能上传单个文件，选择文件覆盖原有文件 vsftpd限制用户只能上传不能下载关于ajaxFileUpload只能上传一次的解决 element ui实现手动上传文件，且只能上传单个文件，并能覆盖上传。 element UI Upload 上传文件只能上传一次，第二次后无反应的问题的坑 vsftp实现只能上传不能下载、删除权限配置 el-upload自定义上传只能上传一次，无法上传多次 FTP不能上传文件解决方法-