首页 > 其他分享> > Bootstrap美化图片上传

Bootstrap美化图片上传

2022-03-19 17:31:02 作者：互联网

1.下载bootstrap-fileinput包和bootstrap包

bootstrap-fileinput包下载地址
 bootstrap下载

2.目录结构

在这里插入图片描述资源的引入语句为:

但按理说目录结构资源的正确引用：
…/common/bootstrap/js/bootstrap.js
但这样引用反而会报错，暂时无法理解
在这里插入图片描述

3.效果示意图

请添加图片描述

4.代码

test.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引入js  -->
    <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
    <!--引入bootstrap -->
    <!--引入bootstrap -->
    <script src="common/bootstrap/js/bootstrap.js"></script>
    <script
            src="common/bootstrap-fileinpu/js/fileinput.min.js"
            type="text/javascript"></script>
    <script src="common/bootstrap-fileinpu/js/locales/zh.js"
            type="text/javascript"></script>
    <link
            href="common/bootstrap-fileinpu/css/fileinput.min.css"
            rel="stylesheet">
    <!--引入bootstrap -->
    <link href="common/bootstrap/css/bootstrap.css"
          rel="stylesheet">
    <link href="common/bootstrap/css/bootstrap-theme.min.css"
          rel="stylesheet">
</head>
<body>
<!--                上传图片的实现-->
<div class="form-group">
    <label class="col-sm-2 control-label col-sm-offset-1">上传图片</label>--
    <div class="col-sm-6">
        <input id="myFile" type="file" name="image" class="fileloading">
    </div>
    <input type="hidden" name="user.logo" id="logo">
</div>
<script>

    $("#myFile").fileinput({
        language : 'zh',
        uploadUrl : "./admin/upload/photo",
        autoReplace : true,
        maxFileCount : 1,
        allowedFileExtensions : [ "jpg", "png", "gif" ],
        browseClass : "btn btn-primary", //按钮样式
        previewFileIcon : "<i class='glyphicon glyphicon-king'></i>"
    }).on("fileuploaded", function(e, data) {
        var res = data.response;
        alert(res.success);
        $("#logo").attr("value", res.success);
    })
</script>

</body>
</html>

Controller层

@RequestMapping("/admin/upload/photo")
	@ResponseBody
	public Map<String,Object> updatePhoto(HttpServletRequest request, HttpServletResponse response, @RequestParam("image")MultipartFile myFile){
		Map<String,Object> json=new HashMap<>();
		try {
			//输出文件后缀名称
			System.out.println(myFile.getOriginalFilename());
			DateFormat df=new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
			//图片名称
			String name=df.format(new Date());
			String ext= FilenameUtils.getExtension(myFile.getOriginalFilename());
			String savePath="lostandfound_img"+"/"+name+"_"+myFile.getOriginalFilename();
			System.out.println("savePth:"+savePath);
			//文件上传的绝对路径
			File dest=new File("D:/",savePath);
			System.out.println(dest.getPath());
			if(!dest.exists()){
				dest.createNewFile();
			}
			myFile.transferTo(dest);


		} catch (Exception e) {
			e.printStackTrace();
		}
		json.put("success","/static/img/upload/photo");
		return  json;
	}

标签：bootstrap,success,dest,photo,Bootstrap,myFile,new,上传,美化
来源： https://blog.csdn.net/qq_48621751/article/details/123467105