Bootstrap Fileinput 4.4.7文件上传实例详解

本实例所做功能为发送带附件邮件,可以上传多个附件,操作为选择一个附件以后自动上传,然后继续选择附件,填写完表单其他信息,点击保存发送带附件邮件。

HTML标签

<input id="fileUpload" type="file" name="file" data-show-preview="true" multiple/>

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', function(event, data, msg) {

alert(msg);

});

}

java后台上传文件代码

@RequestMapping(value="/fileupload")

@ResponseBody

public Map<String, Object> fileUpload(HttpServletRequest request, HttpServletResponse response) {

ResourceBundle bundle = PropertyResourceBundle.getBundle("application");

MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest)request;

Map<String,MultipartFile> fileMap = multipartRequest.getFileMap();

String rootPath = bundle.getString("upLoadUrl");

String filePath = rootPath;

Map<String, Object> map = new HashMap<>();

map = uploadFiles(filePath,fileMap);

return map;

}

实际上传操作,返回上传操作经过处理的文件名,保证服务器端文件名唯一

public Map<String, Object> uploadFiles(String savePath,Map<String,MultipartFile> fiLeMap){

Map<String, Object> map = new HashMap<>();

try {

String fileName = "";

if(fiLeMap!=null){

for(Map.Entry<String, MultipartFile> 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;

}

}

ajax提交其他表单参数和所传附件文件名集合

$.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 Fileinput 4.4.7文件上传实例详解 的全部内容, 来源链接: utcz.com/z/348196.html

回到顶部