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

最新推荐文章于 2025-08-07 14:00:29 发布

原创最新推荐文章于 2025-08-07 14:00:29 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #css #javascript

前端组件专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍如何使用Bootstrap FileInput插件实现图片上传功能。包括配置文件引用、视图代码编写及JavaScript代码实现，展示了如何预览图片并获取Base64编码值。

第一步、引用bootstrap-fileinput-js所需的配置文件
在这里插入图片描述
第二步、编写视图代码

第三步、编写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;
          }});