bootstrap上传

<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