js realizes the functions of selecting pictures, previewing and uploading

 js selects pictures, previews, and uploads functions. Using the ui framework layui and jquery, the pseudo code is as follows:

<form class="layui-form layui-form-pane layui-col-md6 layui-col-md-offset3">
            <div class="layui-form-item">
                <label class="layui-form-label">logo</label>
                <div class="layui-input-inline">
                    <button type="button" class="layui-btn layui-btn-normal" onclick="openImg()">打开图片</button>
                    <input type="file" id="sub_file" name="imageUpload" accept="image/*"/>
                </div>
                <div class="layui-word-aux" id="subtitleSelectImgName"></div>
            </div>
            <div class="layui-form-item">
                <div id="preview"></div>
            </div>
            <div class="layui-form-item">
                <div class="layui-form-mid layui-word-aux">温馨提示：支持上传.png.jpg图片格式，推荐尺寸230*90像素，请将每张图片的大小控制在100Kb以内。</div>
            </div>
            <div class="layui-form-item">
                <div id="tips"></div>
            </div>
            <div class="layui-form-item" style="text-align: right;">
                <button type="button" class="layui-btn layui-btn-normal" id="calculate" onclick="inputUpload()">上传</button>
            </div>
        </form>

 function openImg() {
        $("#sub_file").click();
    }

    function preview2(file) {
        var reader = new FileReader()
        reader.onload = function (e) {
            var $img = $('<img>').attr("src", e.target.result);
            $('#preview').empty().append($img);
        }
        reader.readAsDataURL(file);
    }

    let form_data;
    $(function () {
        $('[type=file]').change(function (e) {
            var file_data = e.target.files[0];
            if (file_data !== undefined) {
                $("#subtitleSelectImgName").text(file_data.name);
                preview2(file_data);
                form_data = new FormData();
                form_data.append("img", file_data);
            } else {
                $("#subtitleSelectImgName").html("");
                $('#preview').empty();
            }
            $("#tips").html("");
        })
    })
//上传
    function inputUpload() {
        if ($("#subtitleSelectImgName").text() == "") {
            $("#tips").html("请选择图片").css("color", "#FF4351");
            return;
        }
        let load = layer.load(1, {shade: [0.1, '#fff']});
        setTimeout(function () {
            //上传到服务器
            $.ajax({
                type: "POST", // 上传文件要用POST
                url: "http://" + FileIP + "/uploadlogo",
                dataType: "json",
                crossDomain: true, // 如果用到跨域，需要后台开启CORS
                processData: false, // 注意：不要 process data
                contentType: false, // 注意：不设置 contentType
                data: form_data,
                async: false,
                success: function (msg) {
                    console.log("chenggong " + msg);
                },
                error: function (data) {
                    $("#tips").html("失败").css("color", "#FF4351");
                    console.log("shibai " + data);
                    layer.close(load);
                }
            });
        }, 100);
    }

 Choose a picture effect: