页面使用bootstrap-fileinput-js组件以base64编码上传图片

第一步、引用bootstrap-fileinput-js所需的配置文件
在这里插入图片描述
第二步、编写视图代码
页面使用bootstrap-fileinput-js组件以base64编码上传图片_第1张图片
第三步、编写javascript代码(重点

      var cover = "";
      $("#imgUpload").fileinput({
          language : 'zh',
          showUpload:false,
          autoOrientImage:false,
          uploadUrl:"#",
          allowedFileType : ['image'],
          allowedFileExtensions : ['jpg','jpeg','png','gif'],
          previewFileType :'image',
          showCaption: true,
          showRemove: true,
          overwriteInitial: false,
          initialCaption: "请选择上传图片",
          dropZoneEnabled: false
          }).on("filebatchselected", function(e, files) {
              var file = this.files[0];
              var oFReader = new FileReader();
              oFReader.readAsDataURL(file);
              oFReader.onload = function (oFREvent) {
              cover = oFREvent.target.result;
          }});

最后将cover中base64编码的值传到后端就可以了。

你可能感兴趣的:(前端组件)