图片上传 (保存在指定路径)

最新推荐文章于 2024-09-10 21:13:21 发布

AlwenZwei

最新推荐文章于 2024-09-10 21:13:21 发布

阅读量1w

点赞数 6

分类专栏： java 文章标签：文件上传图片上传图片回显

本文链接：https://blog.csdn.net/AlwenZwei/article/details/84798843

版权

图片上传 (保存在指定路径)

效果如下:

准备工作:

1) 前端 html

<div class="avatar_inner_content">
    <div>
        头像照片
        <div id="upload_avatar_btn">
            <input class="avatar_upload_input" type="file" placeholder="">选择您要上传的头像
        </div>
        <p class="upload_avatar_tip">支持jpg,jpeg,png格式,且图片小于1M</p>
        <div class="upload_avatar_div"></div>
        <div class="file_upload_tip"></div>
        <div id="upload_avatar_confirm" class="btn">确认</div>
    </div>
</div>

2) 按钮样式

#upload_avatar_btn {
    display: inline-block;
    height: 35px;
    line-height: 35px;
    width: 17%;
    position: relative;
    border: 1px black solid;
    text-align: center;
    margin-left: 2%;
    padding: 2px 2%;
}
.avatar_upload_input {
    width: 100%;
    height: 100%;
    left: 0;
    position: absolute;
    cursor: pointer;
    opacity: 0;
    z-index: 1;
}

图片上传前端:

1.检测图片合法性

//检测图片合法性
function check_file(file){
    let file_size = file[0].size;           //容量检测
    if(file_size > global_file_size){
        file_upload_tip.text("上传的文件不大于1M");
        return false;
    }
    let file_name = file[0].name;
    if(file_name.lastIndexOf('.') === -1){  //后缀检测
        file_upload_tip.text(&