Bootstrap FileInput实现图片上传功能

2023-07-06 04:43:02 181

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

html代码：


图片


//获取上传的图片路径，$("#filesInput").val()获取不到，用隐藏的input来获取

引入js和css文件

js代码：

varList=newArray();//定义一个全局变量去接受文件名和id
$(function(){
varpicStr=[
http:...,
http:....
];
varpicStrConfig=[
{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:"btnbtn-primary",//按钮样式
dropZoneEnabled:false,//是否显示拖拽区域
maxFileCount:5,//表示允许同时上传的最大文件个数
enctype:'multipart/form-data',
validateInitialCount:true,
layoutTemplates:{actionUpload:''},
maxFilesNum:5,
fileType:"any",
allowedPreviewTypes:['image'],
previewFileIcon:"",
initialPreviewAsData:true,
initialPreview:picStr,//初始化回显图片路径
initialPreviewConfig:picStrConfig//配置预览中的一些参数

}).on("fileuploaded",function(event,data,previewId,index){
varresponse=data.response;
varfilePath=data.response.filePath;//文件上传成功返回的文件名，可返回自定义文件名
List.push({FileName:filePath,KeyID:previewId})
//alert(response.filePath);
//$("#fileMd5").val(response.fileMd5);
//$("#version").val(response.newVersionName);
varresources=$('#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){//删除原图片之后的动作
varresources=$("#resources").val();
varrespone=previewId.responseJSON;
if(respone.code==0){
vardeleteName="/"+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){
varform=data.form,files=data.files,extra=data.extra,
response=data.response,reader=data.reader;
}).on("filesuccessremove",function(event,data,previewId,index){
varresources=$("#resources").val();
for(vari=0;i-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
publicMapuploadData(HttpServletRequestrequest,HttpServletResponseresponse)throwsException{
request.setCharacterEncoding("UTF-8");
Mapjson=newHashMap();
MultipartHttpServletRequestmultipartRequest=(MultipartHttpServletRequest)request;

/**页面控件的文件流**/
MultipartFilemultipartFile=null;
Mapmap=multipartRequest.getFileMap();
for(Iteratori=map.keySet().iterator();i.hasNext();){
Objectobj=i.next();
multipartFile=(MultipartFile)map.get(obj);

}
/**获取文件的后缀**/
Stringfilename=multipartFile.getOriginalFilename();

InputStreaminputStream;
Stringpath="";
StringfileMd5="";
try{
/**文件上传到存储库中**/
inputStream=multipartFile.getInputStream();
FiletmpFile=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(Exceptione){
e.printStackTrace();
logger.error("上传失败",e);
json.put("fileMd5",fileMd5);
json.put("message","上传失败");
json.put("status",false);
json.put("filePath",path);
returnjson;
}
json.put("fileMd5",fileMd5);
json.put("message","上传成功");
json.put("status",true);
json.put("filePath",path);
json.put("key",UUIDGenerator.getUUID());
returnjson;
}

/**
*删除文件文件
*/
@RequestMapping("/edit/deleteData/{id}")
@ResponseBody
@Transactional(rollbackFor=Exception.class)
publicAjaxResultdeleteData(@PathVariable("id")Stringid,HttpServletRequestrequest)throwsException{
Stringkey=request.getParameter("key");
Recordrecord=recordService.getById(id);
StringpicUrls=record.getPicUrls();
StringdeleteName="/"+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);
returnsuccess(key);
}
returnerror();
}

修改fileInput源码：

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

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

Bootstrap FileInput实现图片上传功能

热门推荐

随机推荐