BootStrap上传组件使用

• Z时代
• 2024-01-10
• 分类：综合

1.  导入 上传组件  设置文件名为: inc_fileInput.jsp

<script src="/script/bootstrap-fileinput-4.4.9/js/fileinput.min.js"></script>
<link href="/script/bootstrap-fileinput-4.4.9/css/fileinput.min.css" rel="stylesheet" />
<script src="/script/bootstrap-fileinput-4.4.9/js/locales/zh.js"></script>

2.  在 html 中新增上传 modal

<!-- 新增modal begain -->
	<div class="modal fade" id="upload_modal" tabindex="-1" role="dialog">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
					<h4 class="modal-title">图片上传</h4>
				</div>
				<div class="modal-body">
					<div class="container-fluid">
						<form id="form" action="AF/upload/insert" method="post"
							enctype="multipart/form-data">
							<div class="row form-group">
								<label class="col-md-4">文件上传:</label>
								<div class="col-sm-12">
									<input id="input-id" name="file" multiple type="file" data-show-caption="true">
								</div>
							</div>
						</form>
					</div>
				</div>
				<div class="modal-footer" class="col-sm-8">
					<button type="button" class="btn btn-default" id="closeModal"
						data-dismiss="modal">Close</button>
				</div>
			</div>
			<!-- /.modal-content -->
		</div>
		<!-- /.modal-dialog -->
	</div>
	<!-- /.modal -->
	<!-- 新增modal end -->

3.  添加 upload.js

function initFileInput() {
    var count = 0;
    //上传组件挂载点
    var control = $("#input-id");
    //上传地址
    var url = "/upload/file";
    //control.fileinput("upload");
    control.fileinput("refresh", {
        language: "zh", //设置语言
        uploadUrl: url, //上传的地址
        // allowedFileExtensions: ["jpg", "gif", "png"],//接收的文件后缀
        //上传时要携带的数据
        uploadExtraData: function (previewId, index) {
            var data = {
            		/**
                mediaType: $("#media_type_info  option:selected").text(),
                duration: $("#media_play_duration").val(),
                volume: $("#media_play_volume").val(),
                crcCode: $("#media_md5_sum").val(),
                description: $("#message-describe").val(),
                **/
            };
            return data;
        },
        maxFileCount: 1, //表示允许同时上传的最大文件个数
        uploadAsync: true, //默认异步上传
        showUpload: true, //是否显示上传按钮
        showRemove: true, //显示移除按钮
        showPreview: true, //是否显示预览
        showCaption: false,//是否显示标题
        browseClass: "btn btn-primary", //按钮样式
        enctype: "multipart/form-data",
        validateInitialCount: true,
        previewFileIcon: "<i class="glyphicon glyphicon-king"></i>",
        msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",
        //maxFileSize: 0,//单位为kb，如果为0表示不限制文件大小
    }).on("filepreupload", function (event, data, previewId, index) {     //上传中
        console.log(data + "文件正在上传");
    }).on("fileuploaded", function (event, data, previewId, index) {    //一个文件上传成功
        var status = data.response.status;
        var url = data.response.data;
        var context = "";
        if (status == "200") {
            count = count + 1;
            context = "文件上传成功";
            $("#url").val(url);
        }
        if (count == 1) {
        	alert("文件上传成功");
            //remindsDialogBulue(context);
        }
        if (status == "404") {
            alert("文件上传失败！");
        }
    }).on("fileerror", function (event, data, msg) {  //一个文件上传失败
        count = count + 1;
        if (count == 1) {
        	alert("文件上传失败！");
        }
    }).on("filecleared", function (event, data, msg) {
    }).on("filebatchuploadsuccess", function () {
    });
}
$(function(){
	initFileInput();
});

4. 在 服务端接收

@RequestMapping("/file")
	@ResponseBody
	public  StudyResult FileUpload(MultipartFile file){
		Map<String,Object> map= pictureService.uploadFile(file);
		if(map.get("error").equals(0)){
			return StudyResult.build(200, "文件上传成功", map.get("url"));
		}else{
			return StudyResult.build(404, "文件上传失败");
		}
	}

以上是 BootStrap上传组件使用 的全部内容， 来源链接： utcz.com/z/510795.html