SpringBoot个人博客项目——相册模块开发(二)

预览功能:

先说预览功能,就是用户写下内容后,点击预览先看一下样式,然后还能返回来去保存写的数据。

实现:

其实也很简单,我们在预览的按钮加上οnclick=“perviewAlbum()” 事件,在点击的时候,我们肯定得新创建一个页面,以为如果在原页面上面进行操作的话,用户写的信息会消失。

		<!-- 预览按钮 -->
					<div class="button_su" style="width: 130px; height: 50px; position: relative; left: 100px; bottom: -90px">
						<span class="su_button_circle"> </span>
						<a onclick="perviewAlbum()" class="button_su_inner">
							<span class="status_btn" style="color: white; position: relative; right: 0px; bottom: 11px">预览</span>
						</a>
					</div>
		//预览相册
		function perviewAlbum()
		{
			//书写表单

			var formStr = '<form method = "POST" action="http://localhost:8080/perviewAlbum">'+
					'<textarea hidden = "hidden" name="title" id="textareaTitle" >'+$("#textareaTitle").val()+'</textarea>' +
					'<textarea hidden = "hidden" name="content" id="textareaContent" >'+$("#textareaContent").val()+'</textarea>'
					+'</form>'


			//打开页面
			var win=window.open("");
			//放置表单
			win.document.body.innerHTML=formStr;
			//提交表单
			win.document.forms[0].submit();

		}

这个函数里面,我们自己写一个form表单,注意字符串的格式,我们只需要获取用户写的title和content,然后将这些传入到另一个请求中,重新打开页面即可实现。
在这里插入图片描述

    //预览相册
    @RequestMapping("/perviewAlbum")
    public String perviewAlbum(Album album, ServletRequest request)
    {

        Date date=new Date(System.currentTimeMillis());
        SimpleDateFormat format=new SimpleDateFormat(("yyyy-MM-dd hh:mm"));
        String createTime=format.format(date);
        //只用封装CreateTime
        album.setCreateTime(createTime);
        request.setAttribute("album",album);
        return "perview-image.html";

    }

在这里插入图片描述
相册已经完成添加,需要注意的是,我们在显示相册的时候,需要控制一下style,防止字数过多导致显示过多,影响美观。

style="width: 460px;height: 90px; overflow: hidden;text-overflow:ellipsis;white-space: normal;"

在这里插入图片描述

添加图片:

相册也创建好了,接下来就是要添加图片了,添加图片怎么添加呢。我们的思路是这样的。
在这里插入图片描述
所以我们在点击添加图片的时候,是不是应该弹出一个窗口,来让我们选择添加到那个相册啊。
在这里插入图片描述
老样子,在添加图片按钮增加点击事件。

		<!-- 添加图片 -->
					<button onclick="addImage()" class="bubbly-button" style="width: 150px; height: 50px; position: relative; left: 470px; bottom: -10px">
						<span class="status_btn" style="color: white; position: relative; right: 0px; bottom: 5px">添加图片</span>
					</button>
	<script src="layer/layer.js"></script>
	<script type="text/javascript" th:inline="javascript">

		function addImage()
		{
			layer.open({
				type:2,
				area:['1200px','720px'],
				fixed:false,
				maxmin:true,
				content:'selectAlbum'

			});
		}

	</script>>

这个函数使用layer插件,弹出一个页面,实现简单而且美观,我们再写一个请求到新的页面,然后再里面点击相册的标题来选择文件上传。
在这里插入图片描述
上传文件还是和之前上传封面差不多的操作,这里不在细说。
这里的方法用到thmeleaf和字符串的组合,加||来让thmeleaf去解析。

	<div class="album-title">
			<a href="javascript:;" th:onclick="|addImage(${album.id})|" th:text="${album.title}">重构图像样式测试</a>
	</div>
<form id="saveImage" method="post" enctype="multipart/form-data" >
		<input id="albumId" name="albumId" hidden="hidden">
		<input id="imageFile" onchange="addImageInput(this)" type="file" multiple="multiple" hidden="hidden" name="files"/>
	</form>

	<script type="text/javascript" th:inline="javascript">

		//相册添加图片,打开文件选择对话框
		function addImage(id)
		{
			//赋值
			$("#albumId").val(id);
			//出现选择文件的页面
			document.getElementById("imageFile").click();
		}

		//选择文件后,点打开,会触发onchange事件,这个函数来进行处理//确认上传
		function addImageInput(e)
		{
			//获取form表单
			var formData=new FormData($("#saveImage")[0]);

			$.ajax({

				type:"POST",
				url:[[@{~/batchUploadImage}]],
				async:false,
				cache:false,
				data:formData,
				processData:false,
				contentType:false,
				dataType:"json",
				error:function (data)
				{
					layer.msg('上传成功');
				}

			})

		}

	</script>>

这里和之前不太一样的是,还需要多传入一个相册id,这样才能知道是上传到了那个相册里面,由于是批量上传,需要加multiple=“multiple” 属性,而且方法也有点不同。
遍历传过来的文件数组,一个一个上传

    @RequestMapping("/batchUploadImage")
    public String batchUploadImage(@RequestParam(value = "files")MultipartFile[] files,String albumId) throws Exception {
        //维护关系
        Album album= albumService.findAlbumById(new Long(albumId));

        //一个一个上传文件
        for(MultipartFile file:files)
        {
            String fileName=null;
            fileName=file.getOriginalFilename();

            //得到路径
//            String path= ResourceUtils.getURL("classpath:").getPath()+"static/upload"+albumId;
            String path="/D:/学习/Idea项目/blog/target/classes/static/upload/"+albumId;
            //new 文件
            File dest=new File(path+"/"+fileName);
            //判断路径是否存在
            if(!dest.getParentFile().exists())
            {
                dest.getParentFile().mkdir();
            }
            //保存文件
            try {
                file.transferTo(dest);

                //保存图片
                Image image=new Image(fileName,album);
                //维护关系
                imageService.saveImage(image);

            }catch (Exception e){
                return "error";
            }


        }

        return "redirect:/image";
    }
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值