前端实现上传图片

<div class="photo">
     <div class="photo_img">
           <img src="./images/update.png" alt="" id="sitting">
     </div>
     <input type="file" name="file" id="Image">
</div>

$('#Image').on('change', function (e) {
    $('.layout').removeClass('hide');
    $('.updateImg').removeClass('hide');
    $('body').addClass('over');
    var that = $(this);
    setTimeout(function () {
        var formData = new FormData();
        var name = $(that).val();
        var files = $(that)[0].files[0];
        formData.append("file", files);
        formData.append("name", name);
        //另外加的参数
        formData.append("act", "PostImg");
        // console.log(formData)
        $.ajax({
            url: 后台上传图片接口,
            type: 'POST',
            data: formData,
            async: false,
            processData: false,
            contentType: false,
            dataType: 'json',
            beforeSend: function () {

            },
            success: function (res) {
                // console.log(res)
                $('body').removeClass('over');
                $('.layout').addClass('hide');
                $('.updateImg').addClass('hide');
                if (res.code == 0) {
                    $('#sitting').attr('src', res.data.src);
                    imgUrl = res.data.src;
                } else {
                    M.dialog1 = jqueryAlert({
                        'content': res.msg
                    });
                }
            }
            , error: function (res) {
                alert('上传失败');
            }
        });
    }, 1000)

});