标签：function style idcardcla bootstrap querySelector fileinput document 上传

<link href="~/Resources/bootstrap/Fileinput/css/fileinput.min.css" rel="stylesheet" />
<script src="~/Resources/bootstrap/Fileinput/js/fileinput.min.js"></script>
<script src="~/Resources/bootstrap/Fileinput/js/locales/zh.js"></script>

HTML

       <div class="form-group child" id="idcardcla">
            <label for="IdCardPath" class="col-sm-2 control-label">身份证照片:</label>
            <div class="col-sm-5">
                <input type="hidden" id="IdCardPath" name="IdCardPath" />
                <input type="file" id="txt_IdCardfile" class="file-loading">
            </div>
        </div>

JS

    $(function () {

        $('#IdCardPath').val('');

        //身份证
        $("#txt_IdCardfile").fileinput({
            language: 'zh',
            uploadAsync: true,
            uploadUrl: "/SpecialWorkers/UploadFile",
            dropZoneEnabled: false,
            autoReplace: true,
            maxFileCount: 1,
            layoutTemplates: { actionUpload: "" },
            allowedFileExtensions: ["jpg", "jpeg", "png", "gif"],
            browseClass: "btn btn-primary", //按钮样式
            previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
            mainClass: "input-group-lg",
            showUpload: false,
            maxFileSize: 2048
        })
            .on("fileuploaded", function (e, data) {
                var res = data.response;
                debugger;
                if (res.success == true) {
                    //异步上传，返回来的值添加到隐藏的input里面提交上去一起处理  txt_IdCardfile
                    $("#IdCardPath").val(res.path);
                    toastr.success(res.message);
                    /*         $('#txt_IdCardfile').closest('div.btn-file').attr('style', 'display: none;');*/
                }
                else {
                    toastr.error(res.message);
                }
            })
            .on("filesuccessremove", function (event, uploadedId, index) {
                // 仅对上传成功的图片有效，未上传的图片不执行这里
                // 延迟一秒后删除，否则不准确
                document.querySelector("#idcardcla .fileinput-remove-button").style.display = "none";
                document.querySelector("#idcardcla .fileinput-cancel-button").style.display = "none";
                document.querySelector("#idcardcla .file-caption").classList.remove("icon-visible");
                document.querySelector("#idcardcla .file-caption-name").removeAttribute("title");
                setTimeout(function () {
                    debugger;
                    if ($('#IdCardPath').val() != "") {
                        $('#IdCardPath').val('');
                        $('#txt_IdCardfile').closest('div.btn-file').attr('style', 'display: block;');
                    }
                }, 1000)
            })
            .on('fileremoved', function () {
                debugger;
                if ($('#IdCardPath').val() != "") {
                    $('#IdCardPath').val('');
                    $('#txt_IdCardfile').closest('div.btn-file').attr('style', 'display: block;');
                }
            })
            .on('filebatchselected', function (event, files) {
                debugger;
                $("#txt_IdCardfile").fileinput("upload");
                $('.kv-upload-progress').hide();
            });

        $("#idcardcla .fileinput-remove-button").click(function () {
            document.querySelector("#idcardcla .fileinput-remove-button").style.display = "none";
            document.querySelector("#idcardcla .fileinput-cancel-button").style.display = "none";
            document.querySelector("#idcardcla .file-caption").classList.remove("icon-visible");
            document.querySelector("#idcardcla .file-caption-name").removeAttribute("title");
        });

     
    });

标签：function,style,idcardcla,bootstrap,querySelector,fileinput,document,上传
来源： https://www.cnblogs.com/yueyongsheng/p/16198517.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。