bootstrap File Input 多文件上传插件使用记录（二）删除原文件（bootstrap 文件上传控件）
24
在这篇文章中，我们将为您详细介绍bootstrapFileInput多文件上传插件使用记录的内容，并且讨论关于二删除原文件的相关问题。此外，我们还会涉及一些关于BootstrapFileInput——
在这篇文章中，我们将为您详细介绍bootstrap File Input 多文件上传插件使用记录的内容，并且讨论关于二删除原文件的相关问题。此外，我们还会涉及一些关于Bootstrap File Input —— 文件上传和预览控件、bootstrap File Input 多文件上传插件使用记录（一）配置及批量同步上传、Bootstrap Fileinput 4.4.7文件上传实例详解、bootstrap fileinput 上传插件的基础使用的知识，以帮助您更全面地了解这个主题。
本文目录一览：
总结
以上是小编为你收集整理的bootstrap File Input 多文件上传插件使用记录（二）删除原文件全部内容。
如果觉得小编网站内容还不错，欢迎将小编网站推荐给好友。
这是一个增强的 HTML5 文件输入控件，是一个 Bootstrap 3.x 的扩展，实现文件上传预览，多文件上传等功能。
总结
以上是小编为你收集整理的bootstrap File Input 多文件上传插件使用记录（一）配置及批量同步上传全部内容。
如果觉得小编网站内容还不错，欢迎将小编网站推荐给好友。
本实例所做功能为发送带附件邮件，可以上传多个附件，操作为选择一个附件以后自动上传，然后继续选择附件，填写完表单其他信息，点击保存发送带附件邮件。
HTML标签
rush:xhtml;">
js初始化，设置全局文件名参数
rush:js;">
var fileName = [];
function initFileInput(id,url) {
$("#" + id).fileinput({
language: 'zh',uploadAsync:false,uploadUrl:url,browseClass: "btn btn-secondary",textEncoding:"UTF-8",showUpload: false,showPreview :true,dropZoneEnabled: false,maxFileCount:5,fileActionSettings:{
showUpload: true
},enctype:'multipart/form-data',msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",}).on("filebatchselected",function(event,files) {
$("#fileUpload").fileinput("upload");
}).on("filebatchuploadsuccess",function (event,data,previewId,index){
if(data.response.success == true)
{
fileName.push(data.response.fileName);
}else{
alert("上传失败!");
}
$("#fileUpload").fileinput("clear");
$("#fileUpload").fileinput("reset");
}).on('fileerror',msg) {
alert(msg);
});
}
java后台上传文件代码
rush:java;">
@RequestMapping(value="/fileupload")
@ResponseBody
public Map fileUpload(HttpServletRequest request,HttpServletResponse response) {
ResourceBundle bundle = PropertyResourceBundle.getBundle("application");
MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest)request;
Map fileMap = multipartRequest.getFileMap();
String rootPath = bundle.getString("upLoadUrl");
String filePath = rootPath;
Map map = new HashMap<>();
map = uploadFiles(filePath,fileMap);
return map;
}
实际上传操作，返回上传操作经过处理的文件名，保证服务器端文件名唯一
rush:java;">
public Map uploadFiles(String savePath,Map fiLeMap){
Map map = new HashMap<>();
try {
String fileName = "";
if(fiLeMap!=null){
for(Map.Entry entity:fiLeMap.entrySet()){
multipartfile f = entity.getValue();
if(f != null && !f.isEmpty()){
String uuid = UUID.randomUUID().toString();
fileName = uuid + "#" + f.getoriginalFilename();
File newFile = new File(savePath + "/" + fileName);
f.transferTo(newFile);
}
}
}
map.put("success",true);
map.put("fileName",fileName);
return map;
}catch (Exception e) {
map.put("success",false);
return map;
}
}
rush:js;">
$.ajax({
type: "POST",url: 所需要请求地址,dataType: "json",Traditional:true,data: {
service:$("#service").select2('val').replace("All",""),startTime:$("#start").val(),endTime:$("#end").val(),reason:$("#reason").val(),fileName:JSON.stringify(fileName),outterEmail:isOutterEmail,innerEmail:isInnerEmail,isSendEmail:isSendEmail,subService:$("#subService").select2('val'),runningStatus:$("#runningStatus").select2('val')
},success: function(data){
$("#loadingModal").modal("hide");
fileName.splice(0,fileName.length);
alert(data.msg);
if(data.success) {
location.href = "revision";
}
},error:function(xhr) {
$("#loadingModal").modal("hide");
alert("保存失败");
}
});
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持小编。
前言：
之前的三篇介绍了下bootstrap table的一些常见用法，发现博主对这种扁平化的风格有点着迷了。前两天做一个excel导入的功能，前端使用原始的input type='file'这种标签，效果不忍直视，于是博主下定决心要找一个好看的上传组件换掉它。既然bootstrap开源，那么社区肯定有很多关于它的组件，肯定也有这种常见的上传组件吧。经过一番查找，功夫不负有心人，还是被博主找到了这个组件：bootstrap fileinput。关于这个组件的简单应用，，只不过很多细节都没有涉及，于是博主在完成开发任务之余，总结了下这个组件的一些常见用法。在此记录下，就算做个笔记吧，也给需要使用的朋友提供点方便。
源码以及API地址：
bootstrap-fileinput源码：
bootstrap-fileinput在线API：
bootstrap-fileinput Demo展示：
一、效果展示
1、原始的input type='file'，简直不忍直视。
2、不做任何装饰的bootstrap fileinput：（bootstrap fileinput初级进化）
3、bootstrap fileinput高级进化：中文化、可拖拽上传、文件扩展名校验（如果不是需要的文件，不让上传）
拖拽上传
上传中
4、bootstrap fileinput究极进化：允许同时多线程上传多个文件。
上传中
上传完成后
二、代码示例
怎么样？效果如何？不要急，我们一步一步来实现以上的效果。
1、cshtml页面
首先引入需要的js和css文件。
rush:js;">
//bootstrap fileinput
bundles.Add(new ScriptBundle("~/Content/bootstrap-fileinput/js").Include(
"~/Content/bootstrap-fileinput/js/fileinput.min.js","~/Content/bootstrap-fileinput/js/fileinput_locale_zh.js"));
bundles.Add(new StyleBundle("~/Content/bootstrap-fileinput/css").Include(
"~/Content/bootstrap-fileinput/css/fileinput.min.css"));
@Scripts.Render("~/Content/bootstrap-fileinput/js")
@Styles.Render("~/Content/bootstrap-fileinput/css")
然后定义input type='file'标签
rush:js;">
我们今天的关于bootstrap File Input 多文件上传插件使用记录和二删除原文件的分享就到这里，谢谢您的阅读，如果想了解更多关于Bootstrap File Input —— 文件上传和预览控件、bootstrap File Input 多文件上传插件使用记录（一）配置及批量同步上传、Bootstrap Fileinput 4.4.7文件上传实例详解、bootstrap fileinput 上传插件的基础使用的相关信息，可以在本站进行搜索。
