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