项目8-头像的上传

js实现头像上传并且预览图片功能以及提交 - 掘金 (juejin.cn)

我们简单建立一个表

1.前端知识储备

1.1 addClass的使用

1.基本语法

addClass() 方法向被选元素添加一个或多个类。

该方法不会移除已存在的 class 属性，仅仅添加一个或多个 class 属性。

提示：如需添加多个类，请使用空格分隔类名。

$(selector).addClass(class)

W3School TIY Editor

2.实例分析

点击按钮后

$(document).ready(function(){$("button").click(function(){$("p:first").removeClass("intro").addClass('main');});
}); 
将class删除替换为新的class，随之改变了css的样式

1.2 innerHTML的使用方式

HTML DOM innerHTML 属性 | 菜鸟教程 (runoob.com)

1.实例分析

点击按钮后

1.3 addEventListener() 方法

HTML DOM addEventListener() 方法 | 菜鸟教程 (runoob.com)

element.addEventListener(event, function, useCapture)

1.实例分析

一旦执行了该元素的点击操作，就会调用该函数。

1.4 HTML的change事件

HTML 元素：change 事件 - Web API | MDN (mozilla.org)

当用户更改 <input>、<select> 和 <textarea> 元素的值时，change 事件在这些元素上触发。和 input 事件不同的是，并不是每次元素的 value 改变时都会触发 change 事件。

2.图片的上传

//需要将图片的地址和信息保存到数据库

//同时需要将图片保存在本地存储文件中

//用户的头像可以是一样的

2.1 后端代码

1.分层架构

2.model

@Data
public class Pic {private Integer userId;private String picname;private String path;
}

注意：此处需要与建立的数据库相对应

-- 数据库
drop database if exists `updatepic`;
create database if not exists `updatepic` character set utf8;
-- 使用数据库
use `updatepic`;DROP TABLE IF EXISTS `pic`;
CREATE TABLE `user` (
`id` INT PRIMARY KEY AUTO_INCREMENT,
`picname` varchar(200) NOT NULL,
`path` varchar(255) NOT NULL
);

3.mapper

@Mapper
public interface PicMapper {@Insert("insert  into user(picname,path) values (#{picname},#{path})")Integer insertPic(String picname,String path);
}

4.前后端交互

@RestController
@RequestMapping("/upload")
public class controller {@Autowiredprivate PicMapper picMapper;@RequestMapping("/pic")public Boolean insertPic(@RequestParam("file") MultipartFile file){//获取文件名String picname=file.getOriginalFilename();//指定保存的路径String path="F:/pic/"+picname;//保存文件到本地try {file.transferTo(new File(path));picMapper.insertPic(picname,path);return true;} catch (IOException e) {e.printStackTrace();return false;}}
}

3.前端代码

参考此代码，进行修改。

JS头像的预览和上传 - 牛有肉 - 博客园 (cnblogs.com)

1.upload.html

<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>图片上传</title><link rel="stylesheet" href="css/upload.css">
</head>
<body><div class="reHead"><P class="content-format">头像支持jpg、png、jpeg格式，文件大小最大不能超过100M</P><div class="content"><!-- 表单禁止提交 --><form method="post" onsubmit="return false" enctype="multipart/form-data" id="file_upload" class="headForm"><div id="test-image-preview" class="iconfont icon-bianjitouxiang"><input type="file" name="test" id="test-image-file" class="fileHead" accept="image/gif, image/jpeg, image/png, image/jpg" multiple="multiple"></div><div class="headMain"><span class="file">上传文件</span><p id="test-file-info" class="fileName"></p></div></form></div><div class="but"><!-- <button type="submit" class=" orangeHead" id="upImgSub">保存</button> --><input type="button" class=" orangeHead" value="保存" id="upImgSub" onclick="submitmessage()"/></div></div></body>
<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>   
<script type="text/javascript" src="js/upload.js"></script>    
</html>

2.css

body{font-size: 12px;
}
.reHead{margin: 15px 4%; 
}
.headForm{text-align: center;padding: 40px 0 70px 0;
}
#test-image-preview {position: relative;display: inline-block;width: 100px;height: 100px;border-radius: 50px;background: #F5F5F5;color: #fff;font-size: 60px;text-align: center;line-height: 100px;background-size: contain;background-repeat: no-repeat;background-position: center center;margin-bottom: 26px;
}
.fileHead{position: absolute;width: 100px;height: 100px;right: 0;top: 0;opacity: 0;
}
.content-format {font-size: 12px;font-weight: 400;color: rgba(153, 153, 153, 1);
}
.headMain{height: 40px;
}
.file {position: relative;background: #fff;color: #F39800;font-weight:800;
}
.file input {position: absolute;font-size: 12px;right: 0;top: 0;opacity: 0;
}
.fileName {line-height: 28px;font-size: 12px;font-weight: 400;color: rgba(51, 51, 51, 1);
}
.but{text-align: center;
}
.orangeHead{width: 40%;height: 40px;background: #f60;border: none;
}
.orangeHead{color: #fff;
}

3.js

var fileInput = document.getElementById('test-image-file'),//文件框，里面存的是文件，fileHeadinfo = document.getElementById('test-file-info'),//文件名preview = document.getElementById('test-image-preview');//文件框，头像显示界面dataBase64 = '',preview.style.backgroundImage = 'url(img/个人头像.png)';    //默认显示的图片// 监听change事件:fileInput.addEventListener('change', upImg);// 头像上传逻辑函数
function upImg() {preview.style.backgroundImage = '';       // 清除背景图片if (!fileInput.value) {     // 检查文件是否选择:（此时文件中什么都没选择）$('#test-image-preview').addClass('icon-bianjitouxiang');info.innerHTML = '没有选择文件';} else {$('#test-image-preview').removeClass('icon-bianjitouxiang');info.innerHTML = '';//此时上传文件成功}var file = fileInput.files[0];    // 获取File引用var size = file.size;if (size >= 100 * 1024 * 1024) {     //判断文件大小info.innerHTML = '文件大于100兆不行!';preview.style.backgroundImage = '';$('#test-image-preview').addClass('icon-bianjitouxiang');return false;}if (file.type !== 'image/jpeg' && file.type !== 'image/png' && file.type !== 'image/gif') {    // 获取File信息:info.innerHTML = '不是有效的图片文件!';preview.style.backgroundImage = '';$('#test-image-preview').addClass('icon-bianjitouxiang');return;}// 读取文件:var reader = new FileReader();reader.onload = function (e) {dataBase64 = e.target.result;     // 'data:image/jpeg;base64,/9j/4AAQSk...(base64编码)...}'        preview.style.backgroundImage = 'url(' + dataBase64 + ') ';preview.style.backgroundRepeat = 'no-repeat';preview.style.backgroundSize = ' 100% 100%';};// 以DataURL的形式读取文件:reader.readAsDataURL(file);// console.log(file);
}function submitmessage(){var formData = new FormData();formData.append('file', $('.fileHead')[0].files[0]);alert("进入")// var file = fileInput.files[0];$.ajax({type: 'post',url: '/upload/pic',processData: false,async: false,contentType: false,cache: false,// 使用同步操作timeout: 50000, //超时时间：50秒data: formData,// async: false,     //  当async属性的值为false时是同步的，Ajax请求将整个浏览器锁死，只有ajax请求返回结果后，才执行ajax后面的alert语句。    (虽然可行,但是不推荐) // cache: false,// processData: false,// contentType: false,success:function (res) {    // 返回成功if(res=== true){alert("上传头像成功")          // 上传成功}else{alert("上传头像失败")          // 上传失败}},error: function () {alert("接口错误");       // 返回失败}})
}