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

最新推荐文章于 2025-05-02 20:43:12 发布

程序猿联盟

最新推荐文章于 2025-05-02 20:43:12 发布

阅读量455

点赞数

分类专栏： PHP 前端文章标签： jq上传图片上传进度条上传图片预览 php压缩图片

本文链接：https://blog.youkuaiyun.com/weixin_43687896/article/details/103323783

版权

该博客介绍了如何使用jQuery（jq）实现图片上传时的实时预览功能，并通过Ajax展示上传进度条。同时，后端采用PHP对上传的图片进行压缩处理，以解决大图上传问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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=