js如何控制上传文件时，只能上传图片

最近小颖在做公司项目时，遇到了要限制上传文件格式的问题，所以小颖顺便记录下嘻嘻，为了方便日后再查看，毕竟好记性不如烂笔头嘛，嘻嘻

限制上传文件格式

先看看页面效果：

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

<!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>

 

posted @ 2018-03-22 17:30  爱喝酸奶的吃货  阅读(10558)  评论(4)  编辑  收藏  举报