bootstrap fileinput 文件上传和回显「建议收藏」
bootstrap fileinput 文件上传和回显「建议收藏」
全栈程序员站长
发布于 2022-08-15 19:48:43
发布于 2022-08-15 19:48:43
文章被收录于专栏：全栈程序员必看
大家好，又见面了，我是你们的朋友全栈君。
官网下载文件http://plugins.krajee.com/file-input/demo
bootstrap fileinput 是基于bootstrap基础上的上传插件，so必要的bootstrap文件是要引用的…
1.引用js和css文件
fileinput.css
fileinput.min.js
中文字体
2.初始化fileinput
前台
jsp：
<input id="debugId" name="debugId" hidden="true" /> <!-- 文件上传额外参数 -->
<input id="fileInput" name="files" multiple type="file" class="file" value=""/>如果已经存在，换个名字即可，如class=”file1″class
js：
step1：上传部分，可携带额外参数
$("#fileInput").fileinput('destroy'); // 直接销毁
$("#fileInput").fileinput({
language: 'zh', //设置语言
uploadUrl: GLOBAL.URL+'project/saveFile.do', //上传的地址 http;//localhost:8080/project/saveFile.do
showUpload: false, //是否显示上传按钮
showCaption: false,//是否显示标题
previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
maxFileCount: 6, //表示允许同时上传的最大文件个数
fileActionSettings:{showUpload: false}, // 控制上传按钮是否显示
uploadExtraData: function(previewId, index) { //额外参数
var obj = {};
obj.id = fodderType(); // 这里回调方法
return obj;
},
preferIconicPreview: true, // 开启用图标替换预览效果
previewFileIconSettings: { // configure your icon file extensions
'doc': '<i class="fa fa-file-word-o text-primary"></i>',
'xls': '<i class="fa fa-file-excel-o text-success"></i>',
'ppt': '<i class="fa fa-file-powerpoint-o text-danger"></i>',
'pdf': '<i class="fa fa-file-pdf-o text-danger"></i>',
'txt': '<i class="fa fa-file-text-o text-info"></i>',
'zip': '<i class="fa fa-file-archive-o text-muted"></i>',
'htm': '<i class="fa fa-file-code-o text-info"></i>',
'mov': '<i class="fa fa-file-movie-o text-warning"></i>',
'mp3': '<i class="fa fa-file-audio-o text-warning"></i>'
},
previewFileExtSettings: {
'doc': function(ext) {
return ext.match(/(doc|docx)$/i);
},
'xls': function(ext) {
return ext.match(/(xls|xlsx)$/i);
},
'ppt': function(ext) {
return ext.match(/(ppt|pptx)$/i);
},
'zip': function(ext) {
return ext.match(/(zip|rar|tar|gzip|gz|7z)$/i);
},
'htm': function(ext) {
return ext.match(/(htm|html)$/i);
},
'mov': function(ext) {
return ext.match(/(avi|mpg|mkv|mov|mp4|3gp|webm|wmv)$/i);
},
'mp3': function(ext) {
return ext.match(/(mp3|wav)$/i);
},
'txt': function(ext) {
return ext.match(/(txt|ini|csv|java|php|js|css)$/i);
}
},
layoutTemplates:{ // 预览图片按钮控制，这里屏蔽预览按钮
actionZoom:''
}
});
fodderType = function() {
return $("#debugId").val();
};
step2：单独调用上传
$("#fileInput").fileinput("upload");
step3：控件回显重新初始化
// 假设后台信息已经查询完毕！假设为data！！
$("#fileInput").fileinput('destroy');
$("#fileInput").fileinput({
language: 'zh', //设置语言
uploadUrl: GLOBAL.URL+'project/saveFile.do?id='+bugId, //上传的地址
showUpload: false, //是否显示上传按钮
showCaption: false,//是否显示标题
maxFileCount: 6, //表示允许同时上传的最大文件个数
fileActionSettings:{showUpload: false},//是否显示上文件上的上传按钮
overwriteInitial: false,
allowedPreviewTypes: ['image'],
/*
！这里是预览的数据格式
initialPreview: [
// IMAGE RAW MARKUP
'http://localhost:8080/amp/base/imgs/app-default.jpg',
// IMAGE RAW MARKUP
'http://localhost:8080/amp/base/imgs/app-default.jpg',
// TEXT RAW MARKUP
'123asd啊实打实',
'http://localhost:8080/amp/base/imgs/123.docx'
],*/
initialPreview : data.initialPreview,
initialPreviewAsData: true, // allows you to set a raw markup
initialPreviewFileType: 'image', // image is the default and can be overridden in config below
initialPreviewDownloadUrl: GLOBAL.URL+'project/downFile.do?image={key}',
/*
！这里是回显的数据格式，后台查询后，按照格式展示即可，url是删除访问地址，key是删除的id
initialPreviewConfig: [
{type: "image", caption: "Image-1.jpg", size: 847000, url: "/amp/project/delFile.do", key: 1},
{type: "image", caption: "Image-2.jpg", size: 817000, url: "/amp/project/delFile.do", key: '1519713821098wwp4h8v'}, // set as raw markup
{type: "text", size: 1430, caption: "LoremIpsum.txt", url: "/amp/project/delFile.do", key: 3},
{type: "office", size: 102400, caption: "123.docx", url: "/amp/project/delFile.do", key: '1519788281200pwxfx87'}
],*/
initialPreviewConfig : data.initialPreviewConfig,
preferIconicPreview: true, // this will force thumbnails to display icons for following file extensions
previewFileIconSettings: { // configure your icon file extensions
'doc': '<i class="fa fa-file-word-o text-primary"></i>',
'xls': '<i class="fa fa-file-excel-o text-success"></i>',
'ppt': '<i class="fa fa-file-powerpoint-o text-danger"></i>',
'pdf': '<i class="fa fa-file-pdf-o text-danger"></i>',
'txt': '<i class="fa fa-file-text-o text-info"></i>',
'zip': '<i class="fa fa-file-archive-o text-muted"></i>',
'htm': '<i class="fa fa-file-code-o text-info"></i>',
'mov': '<i class="fa fa-file-movie-o text-warning"></i>',
'mp3': '<i class="fa fa-file-audio-o text-warning"></i>'
},
previewFileExtSettings: { // configure the logic for determining icon file extensions
'doc': function(ext) {
return ext.match(/(doc|docx)$/i);
},
'xls': function(ext) {
return ext.match(/(xls|xlsx)$/i);
},
'ppt': function(ext) {
return ext.match(/(ppt|pptx)$/i);
},
'zip': function(ext) {
return ext.match(/(zip|rar|tar|gzip|gz|7z)$/i);
},
'htm': function(ext) {
return ext.match(/(htm|html)$/i);
},
'mov': function(ext) {
return ext.match(/(avi|mpg|mkv|mov|mp4|3gp|webm|wmv)$/i);
},
'mp3': function(ext) {
return ext.match(/(mp3|wav)$/i);
},
'txt': function(ext) {
return ext.match(/(txt|ini|csv|java|php|js|css)$/i);
}
},
layoutTemplates:{
actionZoom:''
},
uploadExtraData: {
img_key: "1000",
img_keywords: "happy, nature"
}
});后台上传：
@RequestMapping("/saveFile")
@ResponseBody
public String saveFile(@RequestParam(value="files") MultipartFile file,
HttpServletRequest request,HttpServletResponse response){
OutputStream os = null;
InputStream is = null;
boolean returnBoolean = false;
String bug_id = request.getParameter("id"); // 传过来的额外参数
try {
String path = "E:\\WORK\\TOMCAT\\apache-tomcat-8.5.24-amp\\wtpwebapps\\amp";
SimpleDateFormat df = new SimpleDateFormat("yyyyMMdd");
String currentDate = df.format(System.currentTimeMillis());
String pathTemp = path + File.separator + currentDate + File.separator + bug_id;
File fileTemp = new File(pathTemp);
if(!fileTemp.exists()) {
fileTemp.mkdirs();
}
String fullFilePath = pathTemp + File.separator + file.getOriginalFilename();
File fullFile = new File(fullFilePath);
os = new FileOutputStream(fullFile);
is =file.getInputStream();
byte buf[] = new byte[1024];//可以修改 1024 以提高读取速度
int length = 0;
while( (length = is.read(buf)) > 0 ){
os.write(buf, 0, length);
}
returnBoolean = true;
} catch (Exception e) {
e.printStackTrace();
} finally {
if(is !=null) {
try {
is.close();
} catch (IOException e) {
e.printStackTrace();
}
}
if(os !=null) {
try {
os.flush();
os.close();
} catch (IOException e) {
e.printStackTrace();
}
}
}
return JSONObject.fromObject("{\"success\":"+ returnBoolean +"}").toString();
}发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/134055.html原文链接：https://javaforall.cn
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2022年5月2，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
