js控制只能上传‘jpg‘, ‘png‘, ‘bmp‘, ‘jpeg‘, ‘gif‘格式文件

最新推荐文章于 2024-07-30 22:36:34 发布

失眠患者1

最新推荐文章于 2024-07-30 22:36:34 发布

阅读量734

点赞数

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/qigeshenmemingne/article/details/132885398

版权

js控制只能上传’jpg’, ‘png’, ‘bmp’, ‘jpeg’, 'gif’格式文件，且最多只能长传2张图片，两张图片文件名中间用逗号分隔

效果图：

在这里插入图片描述

html：

<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('通过原因')" />
    <th:block th:include="include :: bootstrap-fileinput-css"/>
</head>
<body class="gray-bg">

<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="form-examinerecord-examine-id" th:object="${rankingExamineRecord}">
        <input name="id" id="id" th:field="*{id}" hidden>
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">审核原因：</label>
            <div class="col-sm-8">
                <textarea name="opinion" id="opinion" maxlength="300" class="form-control" placeholder="请输入审核原因，不超过300字" required></textarea>
            </div>
        </div>
        <input name="fileid" id="fileid" value="0" type="hidden">
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">上传模板附件：</label>
            <div class="col-sm-8">
                <div class="file-loading">
                    <input class="form-control file-upload" type="file" name="file" id="file" multiple>
                </div>
            </div>
        </div>
        <div class="form-group" style="margin-left: 40%;margin-top: 40px">
            <div class="col-sm-8">
                <button type="button" id="pass" class="btn btn-sm btn-success" onclick="passById()">通过</button>
                <button type="button" class="btn btn-sm " onclick="closeLayer()">关闭</button>
            </div>
        </div>
    </form>
</div>

<th:block th:include="include :: footer" />
<th:block th:include="include :: bootstrap-fileinput-js"/>
<script th:inline="javascript">
    var prefix = ctx + "erecord/recommendation";

    function passById(index, layero) {
        if($("#fileid").val()=='0'){
            $.modal.alertError("请上传模板附件后再进行操作！")
        }else{
            var id=$("#id").val();
            if ($.validate.form("form-examinerecord-examine-id")) {
                $.ajax({
                    type: "post",
                    url: prefix + "/cityExamineSuccessById/" + id,
                    async: true,
                    data: {
                        "opinion":$("#opinion").val(),
                        "fileid":$("#fileid").val()
                    },
                    success: function (result) {
                        if (result.code == 0) {
                            $.modal.alertSuccess(result.msg);
                            $.modal.close();
                        } else {
                            $.modal.alertError(result.msg)
                        }
                    },
                    error: function (error) {
                        $.modal.alertError(error.msg);
                    }
                });
            }
        }

    }

    //关闭leyer弹出层
    function closeLayer() {
        $.modal.close();
    }

    $(".file-upload").fileinput({
        uploadUrl: ctx+"fastdfs/uploadToEnt",
        allowedFileExtensions: ['jpg', 'png', 'bmp', 'jpeg', 'gif'],
        dropZoneTitle: '可以将文件拖放到这里,支持文件上传',
        maxFileSize: 0,
        maxFileCount: 2,
        showType: 'edit',
        layoutTemplates:{
            actionDelete:''
        }
    });
    var arrayObj = new Array();
    $(".file-upload").on("fileuploaded", function (event, data, previewId, index) {
        var obj = data.response;
        $("#file").removeAttr('required');

        arrayObj.push(data.response.fileid);
        if(arrayObj.length==2){
        	//两张图片文件名中间用逗号分隔
            var fileids=arrayObj[0]+','+arrayObj[1];
            $("#fileid").val(fileids);
            $(this).parents(".input-group").css('display', 'none');//上传按钮隐藏
        }else{
            $("#fileid").val(data.response.fileid);
        }
    });

    $(".file-upload").on('filesuccessremove', function(event, id) {
        $(this).parents(".input-group").css('display', 'block');
        $('#file').attr('required',"true");
        $("#fileid").val('0');
    });

</script>
</body>
</html>