js图片上传（转为base64并传到后台保存到数据库）

最新推荐文章于 2025-06-19 10:04:46 发布

原创最新推荐文章于 2025-06-19 10:04:46 发布 · 7.9k 阅读

4 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

27 篇文章

订阅专栏

本文介绍了一种前端实现的图片上传与实时预览的方法，使用HTML5的File API和FileReader API，能够限制上传图片的大小并在上传前进行预览。文章详细展示了如何使用JavaScript监听文件输入变化，读取图片并转换为Base64格式，同时检查图片大小是否符合要求。

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

html:
    <div>
            <img width="10%" src="" style="display: block" id="imgWait" />
            <input type="file" id="file1" accept="image/*"  value="点击更换头像" style="width:11%" /><%--<asp:FileUpload ID="FileUpload1" runat="server" />--%>   <%--accept="image/*"。 image/gif, image/jpeg,image/png--%>
        </div>

js:
    var file;
            $("#file1").bind('input propertychange', function () {   //监听输入内容改变
                file = document.getElementById("file1").files[0];   //file.type  获取图片类型
                ////预览
                //var URL = window.URL || window.webkitURL;
                //// 通过 file 生成目标 url
                //var imgURL = URL.createObjectURL(file);
                //// 用这个 URL 产生一个 <img> 将其显示出来
                //$('#imgWait').attr('src', imgURL);
                var reader = new FileReader();
                var AllowImgFileSize = 2100000; //上传图片最大值(单位字节)（ 2 M = 2097152 B ）超过2M上传失败
                var imgUrlBase64;
                if (file) {
                    //将文件以Data URL形式读入页面  
                    imgUrlBase64 = reader.readAsDataURL(file);
                    reader.onload = function (e) {
                        //var ImgFileSize = reader.result.substring(reader.result.indexOf(",") + 1).length;//截取base64码部分（可选可不选，需要与后台沟通）
                        if (AllowImgFileSize != 0 && AllowImgFileSize < reader.result.length) {
                            alert('上传失败，请上传不大于2M的图片！');
                            return;
                        } else {
                            //执行上传操作
                            var info = DataInfoPage_PersonalInfomationShow.save(reader.result).value;
                            if (info.flag != 1)
                            {
                                alert(info.result);
                            } else
                            {
                                $('#imgWait').attr('src', info.result);
                            }
                        }
                    }
                }

            });