前端实现头像上传功能

实现的效果图：

html部分的代码：

<div class="form-group last">
    <label class="control-label col-md-2">头&emsp;&emsp;像：</label>
    <div class="col-md-6">
       <div id="imgdiv"><img id="preImg"  style="max-width: 100%; max-height: 500px; line-height: 20px;border-radius: 3px;border: 1px solid #eee;padding: 3px"  src="../img/noImage.png"/></div>
       <input type="file" id="headUrl" name="headUrl" style="display: none" accept="images/*"/>
       <button type="button" class="btn btn-shadow" id="choiceImage" style="color: #7a7fdc;margin-top: 10px;border: 1px solid #ddd;background: rgba(122, 127, 220, .1);border-color: transparent;"><i class="icon-paper-clip"></i> 选择图片
       </button>
      <div id="titleFileValide"></div>
    </div>
</div>

实现的js逻辑代码：

1.选择图片，从而显示在图片区域

2.将图片上传的服务器后端

window.onload = function () {
        new uploadPreview({ UpBtn: "headUrl", DivShow: "imgdiv", ImgShow: "preImg" });
    }
    $("#choiceImage").bind("click", function () {
        $("#headUrl").click();
    });

function uploadImage() {
        // 头像上传
        var headUrlInput = $('#headUrl')[0];
        // 检查用户是否选择了文件
        if (headUrlInput.files.length === 0) {
            console.log("用户未上传头像");
            return; // 如果用户未上传头像，则不执行上传操作
        }

        //头像上传
        var formData = new FormData;
        var headUrlInput = $('#headUrl')[0];
        var headUrlFile = headUrlInput.files[0];

        formData.append("headUrl",headUrlFile);
        formData.append("userId",userId);
        $.ajax({
            type: "POST",
            dataType: "JSON",
            url: serverUrl + "user/updateUserHeader",
            data: formData ,
            contentType: false,
            processData: false, // 设置为 false，以便不对 formData 进行自动处理
            success: function(data) {
                console.log("头像上传成功", data);
            },
            error: function(XMLHttpRequest, textStatus, errorThrown) {
                alert("头像上传失败，请稍后重试。");
            }
        });

    }