input标签 type='file' 上传图片问题

近期，公司有个项目，其中，有个上传头像的功能，在此整理一下。

首先，贴一下代码

html 中

 <input class="weui-uploader__input" id="uploaderInput" type="file" accept="image/*" multiple="" οnchange='openFile(event)'>

js中

        var openFile = function (event) {
            var input = event.target;
            var reader = new FileReader();
            reader.onload = function () {
                var database64 = getBase64Image(reader.result);
                $.ajax({
                    url: UserAPI.upload_headimg,
                    type: "POST",
                    data: { "": database64 },
                    success: function (data) {
                        var url = data["data"];
                        $("#user_img").attr("src", url);
                    }
                });
               
            };
            reader.readAsDataURL(input.files[0]);

        };
        function getBase64Image(imgElem) {
            return imgElem.replace(/^data:image\/(jpeg|jpg);base64,/, "");}

html不用多说了，下面来说一下js中的代码

先说一下流程    将图片内容转换为Base64，然后异步传到后台。 （后台是一个带有object 类型参数的 web api 方法）

下面看一下 FileReader 中的方法

FileReader接口的方法

方法名	参数	描述
readAsBinaryString	file	将文件读取为二进制编码
readAsText	file,[encoding]	将文件读取为文本
readAsDataURL	file	将文件读取为DataURL
abort	(none)	终端读取操作

FileReader接口包含了一套完整的事件模型，用于捕获读取文件时的状态。

FileReader接口的事件

事件	描述
onabort	中断
onerror	出错
onloadstart	开始
onprogress	正在读取
onload	成功读取
onloadend	读取完成，无论成功失败

了解 FileReader 中的方法和事件，那么 js 中的代码也就一目了然了。