文件上传控件bootstrap-fileinput的使用

文件上传控件bootstrap-fileinput点击跳转
补充示例代码

$("#imgUpload")
      .fileinput({
        language: "zh", //设置语言
        uploadUrl: url + "/upload/addImg", //上传的地址
        allowedFileExtensions: ["jpg", "png", "jpeg", "bmp"], //接收的文件后缀
        theme: "fa",      // 主题设置
        initialPreview: url1 + filePath + fileName,        // 初始预览区域显示的图片
        initialPreviewAsData: true,
        initialPreviewConfig: [
          { type: "image", fileType: "image", caption: fileName }
        ],
        dropZoneEnabled: false,          // 禁止点击预览区域进行文件上传操作
        maxFileCount: 1,                    // 最大上传为 1
        showUpload: false,             // 不显示上传按钮，选择后直接上传
        previewClass:"uploadPreview",
      })
      .on("change", function() {               
        // 清除掉上次上传的图片
        $(".uploadPreview").find(".file-preview-frame:first").remove();
		$(".uploadPreview").find(".kv-zoom-cache:first").remove();
      })
      .on("filebatchselected", function(e, files) {        
        $(this).fileinput("upload");             // 文件选择完直接调用上传方法。
      })
      .on("fileuploaded", function(e, data, previewiId, index) {       // 上传完成后的处理
        var form = data.form,
          files = data.files,
          extra = data.extra,
          response = data.response,        // 响应
          reader = data.reader;          // 文件对象
        if (response.flag) {
          let img = new Image();     // 这里上传的是图片，对图片处理获取图片的分辨率
          img.src = reader.result;
          if (img.complete) {
            $(this).attr("data-displayReso", img.width + "*" + img.height);
          } else {
            img.onload = function() {
              $(this).attr("data-displayReso", img.width + "*" + img.height);
            };
          }
        }
      });

注意：

进行多文件上传， ,设置属性maxFileCount 文件的最大数量。
进行单文件上传时，上传后再次选择文件上传，之前上传的还在，需要在change事件中手动清除之前的图片占位。设置属性previewClass