欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Bootstrap FileInput实现图片上传功能

程序员文章站 2022-06-09 21:23:48
本文实例为大家分享了bootstrap fileinput实现图片上传功能的具体代码,供大家参考,具体内容如下html代码:

本文实例为大家分享了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 map<string, object> uploaddata(httpservletrequest request, httpservletresponse response) throws exception{
  request.setcharacterencoding("utf-8");
  map<string, object> json = new hashmap<string, 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, hashing.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);
   }
  }
  })
 });
});

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