项目8-头像的上传

我们简单建立一个表

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)

java 复制代码

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

java 复制代码

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

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

java 复制代码

-- 数据库
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

java 复制代码

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

4.前后端交互

java 复制代码

@RestController
@RequestMapping("/upload")
public class controller {
    @Autowired
    private 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

java 复制代码

<!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

java 复制代码

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

javascript 复制代码

var fileInput = document.getElementById('test-image-file'),//文件框，里面存的是文件，fileHead
    info = 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("接口错误");       // 返回失败
        }
    })
}

4.检测结果

成功！！！