jq上传文件真实进度条

$("#upForm").ajaxSubmit({
    url:"/MultimediaTemplate/multimediaVideoFileUpload.do",
    type: "POST",
    dataType: 'json',
    processData: false,
    contentType: false,
    success: function (res) {
        $('#bj').hide();
        $("#fileVideo").val("");
        alert("上传成功");
    },
    xhr: function() {
        var xhr = new XMLHttpRequest();
        //使用XMLHttpRequest.upload监听上传过程,注册progress事件,打印回调函数中的event事件
        xhr.upload.addEventListener('progress', function (e) {
            console.log(e);

            //loaded代表上传了多少
            //total代表总数为多少

            var progressRate = (e.loaded / e.total) * 100 ;

            $('#bfb').text(parseInt(progressRate)+ '%');
            $('.jd2').width(parseInt(progressRate)+'%');
        })

        return xhr;
    }

});

在使用 jQuery 实现文件上传并显示上传进度条的功能时,需要通过 `FormData` 对象封装文件数据,并利用 `XMLHttpRequest` 的 `upload.addEventListener('progress', ...)` 方法来监听上传进度[^1]。通过监听 `progress` 事件,可以获取当前上传的字节数 (`e.loaded`) 和总字节数 (`e.total`),从而计算出上传百分比,并动态更新进度条的宽度。 ### 前端实现代码 以下是一个完整的 HTML 示例,包含文件上传表单、进度条展示和 jQuery 的 AJAX 文件上传逻辑: ```html <form id="uploadForm" enctype="multipart/form-data"> <input type="file" id="img" name="file" /> <button type="button" onclick="doUpload()">上传</button> </form> <div class="progress" style="width: 100%; background-color: #f3f3f3;"> <div style="width: 0%; height: 30px; background-color: #4caf50;"></div> </div> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script> function doUpload() { var formData = new FormData($("#uploadForm")[0]); var fileExtension = $("#img").val().substring($("#img").val().lastIndexOf(".")); var allowedExtensions = [".jpg", ".jpeg", ".JPG", ".JPEG", ".png", ".PNG"]; if (!allowedExtensions.includes(fileExtension)) { alert("上传图片格式必须为 jpg、jpeg 或者 png"); return false; } $.ajax({ url: "/upAjax", type: 'POST', data: formData, contentType: false, processData: false, xhr: function() { var xhr = new XMLHttpRequest(); xhr.upload.addEventListener('progress', function(e) { if (e.lengthComputable) { var progressRate = (e.loaded / e.total) * 100 + '%'; $('.progress > div').css('width', progressRate); } }); return xhr; }, success: function(result) { if (result === "" || result === null) { alert("请至少选择一个文件"); } else { console.log("上传成功"); } }, error: function(data) { alert("上传失败"); } }); } </script> ``` ### 后端 PHP 接收文件并处理 PHP 接收上传文件可以通过 `$_FILES` 获取上传信息,并使用 `move_uploaded_file()` 将文件从临时路径移动到目标目录。以下是一个基础的 PHP 文件接收示例: ```php <?php if ($_SERVER['REQUEST_METHOD'] === 'POST') { if (isset($_FILES['file'])) { $file = $_FILES['file']; $uploadDir = 'uploads/'; if (!is_dir($uploadDir)) { mkdir($uploadDir, 0777, true); } $targetFile = $uploadDir . basename($file["name"]); if (move_uploaded_file($file["tmp_name"], $targetFile)) { echo "文件上传成功:" . $file["name"]; } else { echo "文件上传失败"; } } else { echo "未接收到文件"; } } ?> ``` ### 注意事项 - `FormData` 是用于封装文件上传数据的关键对象,必须配合 `contentType: false` 和 `processData: false` 使用,以确保 jQuery 不对 `FormData` 进行额外处理[^1]。 - `xhr.upload.addEventListener('progress', ...)` 是实现上传进度条的核心方法,通过监听上传过程中的 `progress` 事件,可以动态更新进度条的样式。 - 在前端限制文件类型是一种辅助性措施,后端仍需进行文件格式验证以确保安全性。 - 确保服务器的 `php.ini` 配置中 `upload_max_filesize` 和 `post_max_size` 设置合理,以支持大文件上传。 ---
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

qaakd

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值