bootstrap fileinput多文件上传

js方法
//多文件上传是一个一个文件传的,后台方法和单文件差距不大
var prefix = ctx + “system/attachment”
var imageData = []; //多图上传返回的图片属性接受数组 这里是因为我在做表单其他属性提交的时候使用,在这里我没有将别的input写出来

$("#img").fileinput({
    language : 'zh',
    uploadUrl :prefix + "/add", //上传方法路径
    showUpload: true, //是否显示上传按钮
    showRemove : false, //显示移除按钮
    showPreview : true, //是否显示预览
    showCaption: false,//是否显示标题
    autoReplace : true,
    minFileCount: 0,
    uploadAsync: true,
    maxFileCount: 10,//最大上传数量
    browseOnZoneClick: true,
    msgFilesTooMany: "选择上传的文件数量 超过允许的最大数值!",
    enctype: 'multipart/form-data',
    // overwriteInitial: false,//不覆盖已上传的图片
    browseClass : "btn btn-primary", //按钮样式
    uploadExtraData:function (previewId, index) {
    //文件上传所需参数
        var busId=$("#busId").val();
        var data = {
            busId:busId,
        };
        return data;
    },
    previewFileIcon : "<i class='glyphicon glyphicon-king'></i>"
})
后台方法
public AjaxResult addSave(@RequestParam("images") MultipartFile file, HttpServletRequest request) throws IOException
{
	Attachment attachment=new Attachment();
	// 上传文件路径
	String filePath = Global.getUploadPath();
	String fileName = file.getOriginalFilename();
	// 上传文件路径 获取我前台busId的值
	String busIdFZ=request.getParameter("busId");
	System.out.println(busIdFZ);
	Integer busId=0;
	if (busIdFZ!=null && busIdFZ!="" && busIdFZ!=" " && busIdFZ.length()!=0) {
		busId = Integer.valueOf(request.getParameter("busId"));
		attachment.setBusId(busId);
	}
	// 上传并返回新文件名称
	String fileName1 = null;
	try {
	//上传方法需要自己写,这边的上传方法是我的框架自带的
		fileName1 = FileUploadUtils.upload(filePath,file,fileName);
		System.out.println(fileName1);
	} catch (FileUploadBase.FileSizeLimitExceededException e) {
		e.printStackTrace();
	} catch (FileNameLengthLimitExceededException e) {
		e.printStackTrace();
	}
	attachment.setFileName(fileName1);
	attachment.setFilePath(filePath);
	return toAjax(attachmentService.insertAttachment(attachment));
}
前台html页面
<div>
<form class="form" action="#" method="post" enctype="multipart/form-data"  id="pollutionForm">
	<!-- 注意事项:Input type类型为file class为样式 id随意 name随意
         multiple(如果是要多图上传一定要加上,不加的话每次只能选中一张图)-->
	图片:<input type="file" class="filePath" id="img" multiple name="images"><br>
</form>
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值