本文实例为大家分享了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);
}
}
})
});
});
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持服务器之家。
原文链接：https://blog.csdn.net/qq_33358864/article/details/113172770
查看更多关于Bootstrap FileInput实现图片上传功能的详细内容...