Bootstrap美化图片上传

余甘不甘

于 2022-03-19 17:27:06 发布

阅读量805

点赞数 1

分类专栏： Bootstrap学习文章标签：前端

本文链接：https://blog.csdn.net/qq_48621751/article/details/123467105

版权

Bootstrap学习专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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;
	}

余甘不甘

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap美化图片上传

1.下载bootstrap-fileinput包和bootstrap包bootstrap-fileinput包下载地址bootstrap下载2.目录结构资源的引入语句为:但按理说目录结构资源的正确引用：…/common/bootstrap/js/bootstrap.js但这样引用反而会报错，暂时无法理解3.效果示意图4.代码test.html<!DOCTYPE html><html lang="en"><head> <me
复制链接

扫一扫