jq上传图片预览并显示进度条，压缩图片

案例，上传信息的时候选择图片，实时预览，ajax提交后台php保存的时候，进度条显示进度。拍照上传时候图片可能太大，这里在php进行了压缩处理。压缩耗时。

一、html代码

<div class="layui-row" style="margin-top: 20px;padding:  0 10px">
    <form class="layui-form" action="" onsubmit="return false;">
        <div class="layui-form-item">
            <label class="layui-form-label" style="width: 16%;"><span style="color:red;">*</span>姓名:</label>
            <div class="layui-input-block" style="width: 74%;margin-left: 26%;">
                <input type="text" name="name" lay-verify="required" placeholder="请输入姓名" autocomplete="off" class="layui-input" style="width: 90%;">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"style="width: 16%;"><span style="color:red;">*</span>电话:</label>
            <div class="layui-input-block" style="width: 74%;margin-left: 26%;">
                <input type="number" name="tel" lay-verify="required" placeholder="请输入联系电话" autocomplete="off" class="layui-input" style="width: 90%;">
            </div>
        </div>

        <input name="openid" type="hidden" value="{$openid}">
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label" style="width: 16%;"><span style="color:red;">*</span>拍照:</label>
            <div class="layui-input-block" style="width: 74%;margin-left: 26%;">

                <div class="input-field" style="width:100px;">
                    <div class="idcard_img" style="border: 1px solid #dddddd;width:100px;">
                        <img id="plsoda" src="shexiangtou.png" width="100%" height="auto" onclick=