图片上传(学习1)单图

　　项目开发不可避免的要用到图片上传,最近也上网看了一些插件的引用,不过都不是很明白.而且感觉(...有点小尴尬).所以就决定从最简单的实现开始,慢慢的自己封装功能.这样自己完善起来也方便,并且自我感觉,对于后台开发来讲(当然,现在的主要还是写交互),自己写这种上传组件的过程,也是一种学习的过程.和自我提升的过程.

　　1.先介绍下所使用的框架,后台controller是用的springboot,mybatis框架,前端交互则是用的thymeleaf.页面则是HTML,这里不对thymeleaf做太多介绍(毕竟本人也是刚接触).

　　2.　纯form表单的提交,当然,这种表单提交的方式有很大的漏洞,因为这种上传的方式是读取的input标签的选取的文件内容,对于需要重复选择/做移除的需求,这种表单提交的方式将会显得非常的局限.因为表单提交的图片是input标签最近拉取的文件列表.对于上一次拉取的图片,即便是在HTML中实现了纯前端的预览,可是实际的效果是无法实现的.

　　　　当然,对于单图上传来说,这种方式还是可以适用的,只是无法对所上传的图片做额外的处理,比如:在上传的时候自动为图片加水印.(当然,听说是有后台/服务器实现的方法,这还有待研究)

　　代码如下:

　　　　

前端HTML
<form th:action="@{表单提交对应的后台路径}"method="post"   th:object="${对应的后台表单对象}"  enctype="multipart/form-data" >
      <input class="file" name="pictures" type="file" style="display:none;" multiple accept="image/*" onchange="imagePreview(this)"/>
　　　　<!-->input标签的name属性是很关键的,因为后台controller获取数据流就是通过这个name属性获取的<-->
　　　　<!-->multiple是声明可选择多图,单图的情况下可去掉 accept="image/*"是声明只可选取图片类型 <-->

</form>

预览JS

　　function imagePreview(input){
　　　　var files = input.files;//获取input标签所选择的图片集合

　　　　var html ="";
　　　　for (var i = 0; i < files.length; i++) {
　　　　　　var file = files[i];
　　　　　　var reader = new FileReader();
　　　　　　reader.onload = function(e) {
　　　　　　for( var j=0;j<$(".img .fileimg").length;j++) {
　　　　　　// console.log($(".img .fileimg").eq(j).find("img").attr("src"));通过这种方式可获取到已有的图片SRC
　　　　　　　　if( e.target.result == $(".img .fileimg").eq(j).find("img").attr("src")){//if方法判断图片是否已经选取,可避免重复选择
　　　　　　　　　　return false;
　　　　　　　　}
　　　　　　}

　　　　　　//加入没有重复选择通过fileReader对象即可读取图片的二进制数据,实现预览
　　　　　　html ="<div class='fileimg'><em class='remove'>移除</em><img width='100' height='100' id='pic"+j+"' src='"+e.target.result+"'></div>"
　　　　　　$(".img").append(html);//页面中做回显
　　　　　　};
　　　　　　reader.readAsDataURL(file);//把图片读取为URL数据
　　　　}
　　}

　　后台对应的映射controller

　　

　　@RequestMapping("/admin/resource/projectEdit")
　　@Controller
　　@MultipartConfig
　　public class ProjectEditController extends AbstractController{　　　

　　　　@RequestMapping(value = "updateOrAddProject" , method = RequestMethod.POST)
　　　　public String updateOrAddProject(@RequestParam(value = "pictures") MultipartFile [] pictures) {

　　　　　　　　//@RequestParam(value = "pictures")中的pictures就是对应的页面中的name="pictures",而此时读取的数据实际上为最近一次通过input标签拉取的图片数据

`　　　　}

　　}

　　对应上传图片的方法,这里我给写到service层了

　　public List<Long> addPiture(MultipartFile[] pictures) {
　　　　List<Long> newPictureIds = new ArrayList<Long>();
　　　　for (MultipartFile picture : pictures) {

　　　　　　/** 获取图片大小判断是否有真的图片上传,因为在几遍不选择图片的情况下,后台的图片数组中length属性也为1 */
　　　　　　Long picSize = picture.getSize();
　　　　　　if(picSize != null && picSize > 0) {
　　　　　　　　/** 获取图片类型 */
　　　　　　　　String contentType1 = picture.getContentType();
　　　　　　　　String pictureType = contentType1.split("/")[1].toString();
　　　　　　　　/** 图片保存名称 */
　　　　　　　　String pictureName = System.currentTimeMillis() + "." +pictureType;
　　　　　　　　/** 获取上传日期 */
　　　　　　　　String nowDate = DateUtil.dateToString(new Date() , "yyyyMMdd");
　　　　　　　　/** 文件相对存放路径 */
　　　　　　　　String uploadFloder = "/upload/" + accountId + "/" + nowDate + "/"+pictureName;
　　　　　　　　/** 文件保存绝对路径 */
　　　　　　　　String filePath = fileUploadFolder + accountId +"\\" + nowDate + "\\" + pictureName;
　　　　　　　　/** 图片所在文件夹路径 */
　　　　　　　　String picFolderPath = fileUploadFolder + accountId +"\\" +nowDate +"\\" ;
　　　　　　　　try {
　　　　　　　　　　uploadPicture(picture.getBytes() , picFolderPath , pictureName);
　　　　　　　　}catch (IOException e){
　　　　　　　　　　throw new ServiceException("图片上传错误");
　　　　　　　　}
　　　　　　}else{
　　　　　　　　continue;
　　　　　　}
　　　　}
return newPictureIds;
}

　　具体执行图片流写入的方法:

　　

　　public void uploadPicture(byte[] file , String filePath , String fileName) {
　　　　File picturePath = new File(filePath);
　　　　if(!picturePath.exists()) {
　　　　　　picturePath.mkdirs();
　　　　}
　　　　FileOutputStream out = null;
　　　　try {
　　　　　　out = new FileOutputStream(filePath+fileName);
　　　　　　out.write(file);
　　　　　　out.flush();
　　　　　　out.close();
　　　　}catch (IOException e) {
　　　　　　throw new ServiceException("图片上传错误");
　　　　}
}