Bootstrap FileInput实现图片上传功能

本文实例为大家分享了Bootstrap Fileinput实现图片上传功能的具体代码，供大家参考，具体内容如下

htML代码：

div class="form-group">
     label class="col-sm-2 control-label">
    图片/label>
     div class="col-sm-8">
      input id="filesInput" tyPE="file" multiple data-browse-on-zone-click="true" class="file-loading" accept="image/*" />
  input id="resources" name="resources" th:value="${
record.picUrls}
    " type="hidden">
    //获取上传的图片路径，$("#filesInput").val()获取不到，用隐藏的input来获取 /div>
    /div>
    

引入js和css文件

link href="/ajax/libs/bootstrap-fileinput/fileinput.css" rel="stylesheet" type="text/css"/>
script th:src="@{
/js/jquery.min.js}
    ">
    /script>
script th:src="@{
/js/bootstrap.min.js}
    ">
    /script>
script th:src="@{
/ajax/libs/bootstrap-fileinput/fileinput.js}
    ">
    /script>
    

js代码：

VAR List = new Array();
//定义一个全局变量去接受文件名和id$(function () {
     var picStr = [http:...,http:....];
var picStrconfig = [{
caption: "11111", width: "120px", fileid:"123456", url: "deleteData", type:"image", key: "1"}
    ,........];
$('#filesInput').fileinput({
 theme: 'fas', language: 'zh', uploadUrl: ctx + 'bike/record/uploadData', uploadAsync: true, //默认异步上传 showUpload: true, //是否显示上传按钮 overwrITeInitial: false, showRemove : false, //显示移除按钮 // showPreview : true, //是否显示预览 showCaption: false,//是否显示标题 browseClass: "BTn btn-Primary", //按钮样式 dropZoneEnabled: false,//是否显示拖拽区域 maxFileCount: 5, //表示允许同时上传的最大文件个数 enctype: 'multipart/form-data', validateInitialCount:true, layoutTemplates: {
actionUpload: ''}
    , maxFilesNum: 5, fileType: "any", AllowedPReviewTypes: ['image'], previewFileIcon: "i class='glyphicon glyphicon-king'>
    /i>
", initialPreviewAsData: true, initialPreview: picStr, //初始化回显图片路径 initialPreviewConfig: picStrConfig //配置预览中的一些参数 }
).on("fileuploaded", function (event, data, previewId, index) {
     var response = data.response;
     var filePath = data.response.filePath;
 //文件上传成功返回的文件名，可返回自定义文件名 List.push({
 FileName: filePath, KeyID: previewId }
    ) // alert(response.filePath);
     // $("#fileMd5").val(response.fileMd5);
     // $("#version").val(response.newVersionName);
     var resources = $('#resources').val();
 if (!resources){
      $("#resources").val(response.filePath);
 }
else{
      $("#resources").val(resources+"^_^"+response.filePath);
 }
  }
).on('filepredelete', function(event, data, previewId, index) {
 //删除原图片之前的触发动作  }
).on('filedeleted',function (event, data, previewId, index) {
    //删除原图片之后的动作 var resources = $("#resources").val();
     var respone = previewId.responseJSON;
 if(respone.code == 0){
      var deleteName = "/"+data;
      if(resources.indexOf("^_^"+deleteName)>
-1){
       $("#resources").val("^_^"+resources.replace(deleteName,""));
       resources = $("#resources").val();
  }
      if(resources.indexOf(deleteName+"^_^")>
-1){
       $("#resources").val(resources.replace(deleteName+"^_^",""));
       resources = $("#resources").val();
  }
      if(resources.indexOf(deleteName)>
-1){
       $("#resources").val(resources.replace(deleteName,""));
       resources = $("#resources").val();
  }
 }
}
).on('filepreupload', function(event, data, previewId, index) {
     var form = data.form, files = data.files, extra = data.extra,  response = data.response, reader = data.reader;
}
).on("filesuccessremove", function (event, data, previewId, index) {
     var resources = $("#resources").val();
     for (var i = 0;
     i  List.length;
 i++) {
  if (List[i].KeyID == data) {
       if(resources.indexOf("^_^"+List[i].FileName)>
-1){
        $("#resources").val("^_^"+resources.replace(List[i].FileName,""));
        resources = $("#resources").val();
   }
       if(resources.indexOf(List[i].FileName+"^_^")>
-1){
        $("#resources").val(resources.replace(List[i].FileName+"^_^",""));
        resources = $("#resources").val();
   }
       if(resources.indexOf(List[i].FileName)>
-1){
        $("#resources").val(resources.replace(List[i].FileName,""));
        resources = $("#resources").val();
   }
   List[i].KeyID = "1"  }
 }
}
)；}
    )

java代码：

/**  * 上传文件*/ @RequestMapping("/uploadData") @ResponseBody public MapString, Object>
 uploadData(HttpServletRequest request, HttpServletResponse response) throws Exception{
      request.setCharacterEncoding("UTF-8");
      MapString, Object>
     JSON = new HashMapString, Object>
    ();
      MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
       /** 页面控件的文件流* */  MultipartFile multipartFile = null;
      Map map =multipartRequest.getFileMap();
      for (Iterator i = map.keySet().iterator();
     i.hasNext();
) {
       Object obj = i.next();
       multipartFile=(MultipartFile) map.get(obj);
   }
      /** 获取文件的后缀* */  String filename = multipartFile.getOriginalFilename();
       InputStream inputStream;
      String path = "";
      String fileMd5 = "";
  try {
       /** 文件上传到存储库中 **/   inputStream = multipartFile.getInputStream();
       File tmpFile = File.createTempFile(filename,   filename.substring(filename.lastIndexOf(".")));
       fileMd5 = Files.hash(tmpFile, @R_512_766@.md5()).toString();
       FileUtils.copyInputStreamToFile(inputStream, tmpFile);
       /** 上传到 MinIO上 **/   path = minioFileUtil.uploadCustomize(multipartFile.getInputStream(), filename.substring(filename.lastIndexOf(".")), "",multipartFile.getContentType());
       /** 上传 到 阿里云oss **///   path = AliOSSUtils.getInstance().multpartFileUpload(multipartFile,"bike");
       tmpFile.delete();
   }
 catch (Exception e) {
       e.printStackTrace();
       LOGger.error("上传失败",e);
       json.put("fileMd5", fileMd5);
       json.put("message", "上传失败");
       json.put("status", false);
       json.put("filePath", path);
       return json;
  }
      json.put("fileMd5", fileMd5);
      json.put("message", "上传成功");
      json.put("status", true);
      json.put("filePath", path);
      json.put("key", UUIDGenerator.getUUID());
      return json;
 }
    

/** * 删除文件文件 */@RequestMapping("/edit/deleteData/{
id}
")@ResponseBody@Transactional(rollbackFor = Exception.class)public AjaxResult deleteData(@PathVariable("id")String id, HttpServletRequest request) throws Exception{
     String key = request.getParameter("key");
     Record record = recordservice.getById(id);
     String picUrls = record.getPicUrls();
     String deleteName = "/" + key;
     if (picUrls.indexOf("^_^" + deleteName) >
 -1) {
      picUrls = "^_^" + picUrls.replace(deleteName, "");
 }
     if (picUrls.indexOf(deleteName + "^_^") >
 -1) {
      picUrls = picUrls.replace(deleteName + "^_^", "");
 }
     if (picUrls.indexOf(deleteName) >
 -1) {
      picUrls = picUrls.replace(deleteName, "");
 }
     record.setPicUrls(picUrls);
 if (recordMapper.updatePicsById(record) == 1) {
     /** 先删除数据库中的图片路径 再删除图片存储的源文件。**/  minioUtil.removeObject(bucketName, key);
      return success(key);
 }
     return error();
}
    

修改 fileInput 源码：

self._handler($el, 'click', function () {
  if (!self._validateMinCount()) {
       return false;
  }
      self.ajaxAborted = false;
      self._raise('filebeforedelete', [vKey, extraData]);
  //noinspection JSUnresolvedVariable,JSHint  $.modal.confirm("确定删除原文件？删除后不可恢复",function () {
 //初始化回显的图片在删除时弹出提示框确认。  if (self.ajaxAborted instanceof Promise) {
   self.ajaxAborted.then(function (result) {
    if (!result) {
         $.ajax(settings);
    }
   }
    );
  }
 else {
   if (!self.ajaxAborted) {
        $.ajax(settings);
   }
  }
  }
) }
    );
}
    );
    

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

• Bootstrap Fileinput文件上传组件用法详解
• JS文件上传神器bootstrap fileinput详解
• Bootstrap fileinput文件上传预览插件使用详解
• Bootstrap中的fileinput 多图片上传及编辑功能
• Bootstrap的fileinput插件实现多文件上传的方法
• bootstrapfileinput实现文件自动上传
• 基于bootstrap的上传插件fileinput实现ajax异步上传功能(支持多文件上传预览拖拽)
• 详解bootstrap-fileinput文件上传控件的亲身实践
• Bootstrap fileinput 上传新文件移除时触发服务器同步删除的配置
• BootStrap fileinput.js文件上传组件实例代码

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！