同一表单上传头像并提交文本值

最新推荐文章于 2025-05-07 16:24:32 发布

东语~

最新推荐文章于 2025-05-07 16:24:32 发布

阅读量427

点赞数 2

CC 4.0 BY-SA版权

分类专栏： JavaScript 开发 J2EE 文章标签：头像表单上传同一表单

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.youkuaiyun.com/psp0001060/article/details/88769446

JavaScript 开发同时被 2 个专栏收录

24 篇文章

订阅专栏

J2EE

16 篇文章

订阅专栏

本文介绍了一种通过将图片转换为Base64编码的方式解决表单中上传图片的问题，并且实现了图片预览功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

传统的表单中要上传图片的时候，需要在form标签中追加enctype=“multipart/form-data” 参数。但是增加该属性后，同一个表单中【input type=“text” name = “username”】等控件的值，后台就会接受不到。本文主要介绍通过将图片转换为base64后，解决该问题。另外，上传图片带有预览功能。

代码下载链接：https://pan.baidu.com/s/1QPyQ3YUsjV_AEFGsguqVoA
提取码：1nf4

一、开发环境

前端：javascript jsp
后端：servlet
数据库： mysql
持久化框架：mybatis

二、界面截图

↓

三、关键代码

index.jsp

<body>
<input type="file" value="head" class="cardPic" onchange="fileCompressToBase64('cardPic',935,'pic',false)">
<form action="/submit" method="post">
    <input class="pic" style="display:none" name="head">
    <input placeholder="account" name="account">
    <input placeholder="password" name="password">
    <br>
    <input type=submit value="submit">
</form>
<img id="preview"/>

<script>
    function convertImgToBase64URL(url, callback, outputFormat) {
        var img = new Image();
        img.crossOrigin = 'Anonymous';
        img.onload = function () {
            var canvas = document.createElement('CANVAS'),
                ctx = canvas.getContext('2d'), dataURL;
            canvas.height = img.height;
            canvas.width = img.width;
            ctx.drawImage(img, 0, 0);
            dataURL = canvas.toDataURL(outputFormat);
            callback(dataURL);
            canvas = null;
        };
        img.src = url;
    }

    function getObjectURL(file) {
        var url = null;
        if (window.createObjectURL != undefined) {
            url = window.createObjectURL(file);
        } else if (window.URL != undefined) {
            url = window.URL.createObjectURL(file);
        } else if (window.webkitURL != undefined) {
            url = window.webkitURL.createObjectURL(file);
        }
        return url;
    }

    function fileCompressToBase64(inputClass, size, outputClass, sqare) {
        //参数分别为输入的那个input file,转换成的图片的宽大小,输出src对应的img,是否转化为正方形
        if (!strInArray(domClass(inputClass).value.split(".")[domClass(inputClass).value.split(".").length - 1], ["jpg,jpeg,png,bmp"]))
            app.VLtips("上传的不是图片!");
        size = typeof(size) !== 'undefined' ? size : 200;
        sqare = typeof(sqare) !== 'undefined' ? sqare : false;
        var imageUrl = getObjectURL(document.getElementsByClassName(inputClass)[0].files[0]);
        convertImgToBase64URL(imageUrl, function (base64Img) {
            document.getElementsByClassName(outputClass)[0].value = base64Img;
            //不需要base64的前缀data:image/jpg;base64的情况下
            //alert(base64Img.split(",")[1]);
        });
        event.preventDefault();

        imgPreview(document.getElementsByClassName(inputClass)[0])
    }


    /**
     * 预览图片
     * */
    function imgPreview(fileDom) {
        //判断是否支持FileReader
        if (window.FileReader) {
            var reader = new FileReader();
        } else {
            alert("您的设备不支持图片预览功能，如需该功能请升级您的设备！");
        }
        //获取文件
        var file = fileDom.files[0];
        //读取完成
        reader.onload = function (e) {
            //获取图片dom
            var img = document.getElementById("preview");
            //图片路径设置为读取的图片
            img.src = e.target.result;
        };
        reader.readAsDataURL(file);
    }

    function strInArray(val, arr) {
        var testStr = ',' + arr.join(",") + ",";
        return testStr.indexOf("," + val + ",") != -1;
    }

    function domClass(className, index) {
        index = typeof(index) !== 'undefined' ? index : 0;
        return document.getElementsByClassName(className)[index];
    }
</script>
</body>

CommonServlet

@Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        SqlSession sqlSession = DoSql.getSqlSession();
        Student student = new Student();
        student.setAccount(request.getParameter("account"));
        student.setPassword(request.getParameter("password"));
        student.setHead(request.getParameter("head"));
        sqlSession.insert("insertStudent", student);
        sqlSession.commit();
        sqlSession.close();
        request.setAttribute("account", student.getAccount());
        request.getRequestDispatcher("/forward").forward(request, response);
    }

Student.java

public class Student {
    private String account;
    private String password;
    private String head;

    public String getAccount() {
        return account;
    }

    public void setAccount(String account) {
        this.account = account;
    }

    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }

    public String getHead() {
        return head;
    }

    public void setHead(String head) {
        this.head = head;
    }
}

DDL:

CREATE TABLE `student_account` (
  `account` varchar(255) default NULL,
  `password` varchar(255) NOT NULL,
  `head` longtext NOT NULL,
  UNIQUE KEY `unique_account` (`account`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8