input 文件上传类型限制。上传图片预览，获取上传文件名称，获取上传文件的后缀名，限制文件大小等

电脑版发表于：2020/9/19 19:19

**限制只能上传图片**
image/*
```
<input type="file" name="file" id="choiseFile" accept="image/*">
```

**限制单一类型的图片**
```

<input type="file" name="Files" accept="image/jpeg" />
```

**限制只能传递文本文件**
```

<input type="file" name="Files" accept="text/plain" />
```

**限制某些后缀的文件**
```
<input type="file" name="file" id="uploadAppendixInp" accept=".xls,.doc,.txt,.pdf,.zip,.rar">
```
后面有使用js限制的方式

**上传图片预览**
```
//图片预览
$("#choiseFile").on('change', function () {
    //获取文件
    var file = this.files[0];
    //读取文件
    if (window.FileReader) {
        var reader = new FileReader();
        reader.readAsDataURL(file);

        //监听文件读取结束后事件
        reader.onloadend = function (e) {

            let htmlToAppend = '<div class="img-preview-wapper"><img src="' + e.target.result + '" class="img-preview" alt=""><span class="img-preview-close"><img src="https://smartedu-apis.cqzuxia.com/asserts/img/error.png" alt=""></span></div>';
            $(".img-preview-wapper-blank").before(htmlToAppend)

            //调用上传图片的接口
            upLoadImg()
            //$("#imgShow").attr('src', e.target.result);
        };
    }
})
```

**获取上传文件名称**
```
//附件名称预览
$("#uploadAppendixInp").on('change', function () {
    //获取文件
    var file = this.files[0];
    //读取文件
    if (window.FileReader) {
        var reader = new FileReader();
        reader.readAsDataURL(file);

        //监听文件读取结束后事件
        reader.onloadend = function (e) {
            //获取上传的文件名
            let fileName = file.name;
            $("#uploadAppendix a").html(fileName)

            //调用上传附件的接口
            upLoadAppendix(fileName)
        };
    }
})
```

**获取上传文件后缀，限制上传文件类型**
```
$("#uploadAppendixInp").on('change', function () {
    //获取文件
    var file = this.files[0];
    //读取文件
    if (window.FileReader) {
        var reader = new FileReader();
        reader.readAsDataURL(file);

        //监听文件读取结束后事件
        reader.onloadend = function (e) {

            //获取上传的文件名
            let fileName = file.name;
            
            //获取文件的后缀名
            let filextend = fileName.substring(fileName.lastIndexOf("."));
            let filetypes = [".rar", ".zip"];
            if (filetypes.indexOf(filextend) < 0) {
                alert("上传类型不支持，请重新选择")
                return
            }

            $("#uploadAppendix a").html(fileName)

            //调用上传附件的接口
            //upLoadAppendix(fileName)
        };
    }
})
```
**限制文件大小**
```
//限制文件上传的大小
let filemaxsize = 1024*20;//20M
var fileSize = file.size / 1024;
if(fileSize>filemaxsize){
    alert("附件大小不能超过"+filemaxsize/1024+"M！！！");
    return
}
```
完整一点的
```
//附件名称预览
$("#uploadAppendixInp").on('change', function () {
    //获取文件
    var file = this.files[0];
    //读取文件
    if (window.FileReader) {
        var reader = new FileReader();
        reader.readAsDataURL(file);

        //监听文件读取结束后事件
        reader.onloadend = function (e) {

            //获取上传的文件名
            let fileName = file.name;

            //获取文件的后缀名
            let filextend = fileName.substring(fileName.lastIndexOf("."));
            let filetypes = [".rar", ".zip"];
            if (filetypes.indexOf(filextend) < 0) {
                alert("上传类型不支持，请重新选择")
                return
            }

            console.log(file);

            //限制文件上传的大小
            let filemaxsize = 1024*20;//20M
            var fileSize = file.size / 1024;
            if(fileSize>filemaxsize){
                alert("附件大小不能超过"+filemaxsize/1024+"M！！！");
                return
            }

            $("#uploadAppendix a").html(fileName)

            //调用上传附件的接口
            //upLoadAppendix(fileName)
        };
    }
})
```

**其他方式来限制文件类型，文件上传大小等可以参考**
```
<input type="file" name="contractFileName" style="width: 500px;" οnchange="fileChange(this);"/>
 
<script type="text/javascript">
    var isIE = /msie/i.test(navigator.userAgent) && !window.opera;
    function fileChange(target,id) {
        var fileSize = 0;
        var filetypes =[".jpg",".png",".rar",".txt",".zip",".doc",".ppt",".xls",".pdf",".docx",".xlsx"];
        var filepath = target.value;
        var filemaxsize = 1024*2;//2M
        if(filepath){
            var isnext = false;
            var fileend = filepath.substring(filepath.lastIndexOf("."));
            if(filetypes && filetypes.length>0){
                for(var i =0; i<filetypes.length;i++){
                    if(filetypes[i]==fileend){
                        isnext = true;
                        break;
                    }
                }
            }
            if(!isnext){
                alert("不接受此文件类型！");
                target.value ="";
                return false;
            }
        }else{
            return false;
        }
        if (isIE && !target.files) {
            var filePath = target.value;
            var fileSystem = new ActiveXObject("Scripting.FileSystemObject");
            if(!fileSystem.FileExists(filePath)){
                alert("附件不存在，请重新选择！");
                return false;
            }
            var file = fileSystem.GetFile (filePath);
            fileSize = file.Size;
        } else {
            fileSize = target.files[0].size;
        }
 
        var size = fileSize / 1024;
        if(size>filemaxsize){
            alert("附件大小不能大于"+filemaxsize/1024+"M！！！");
            target.value ="";
            return false;
        }
        if(size<=0){
            alert("附件大小不能为0M！！！");
            target.value ="";
            return false;
        }
    }
</script>
```

剑轩

input 文件上传类型限制。上传图片预览，获取上传文件名称，获取上传文件的后缀名，限制文件大小等

{{item.title}}