JS带进度文件重复自动异步上传

旧城等待， 2023-08-17 17:10 164阅读 0赞

html

<input type="file" id="file"/>
    <span id="progress_files"></span>

js

let progress_counter = 0;
    let last_fi = null;
    document.getElementById('file').onchange = upload_file;
    
    function upload_file() {
        let fi = document.getElementById('file').files[0];
        const my_form = new FormData();
        my_form.append("file", fi);
        let file_id = null;
        if (fi !== undefined) {
            if (last_fi !== fi) {
                let file_id = 'progress_file_' + progress_counter;
                create_file_progress(file_id, fi.name);
                const xhr = new XMLHttpRequest();
                post_file(xhr, file_id).send(my_form);
                last_fi = fi;
                fi = undefined;
                file_id = null;
            }
        }
    }
    
    function post_file(xhr, file_id) {
        xhr.open("POST", "/upload");
        xhr.upload.addEventListener("progress", function (event) {
            if (event.lengthComputable) {
                const complete = (event.loaded / event.total * 100 | 0);
                document.getElementById(file_id + '_percent').innerText = complete + ' %';
            }
        });
        return xhr;
    }
    
    function create_file_progress(file_id, file_name) {
        if (document.getElementById(file_id) === undefined || document.getElementById(file_id) === null) {
            const progress_title = '<p>' + file_name + '</p>' + '<p id="' + file_id + '_percent"> 0 %</p>';
            document.getElementById('progress_files').innerHTML += progress_title;
            progress_counter += 1;
        }
    }

转载于:https://www.cnblogs.com/edhg/p/11303676.html

发表评论取消回复

表情：

评论列表（有 0 条评论，164人围观）

还没有评论，来说两句吧...

相关阅读

相关 JS带进度文件重复自动异步上传

html <input type="file" id="file"/> <span id="progress_files"></span> js

旧城等待，/ 2023年08月17日 17:10/ 0 赞/ 165 阅读

相关 js上传文件(可自定义进度条)

//本地上传图片、语音 function rsc_UploadFile(file) { var mypic = file.files[0];

Bertha 。/ 2023年08月17日 17:00/ 0 赞/ 178 阅读

相关 JS上传文件显示进度条

用户反馈：图片上传过程中，如果网络比较慢，会发现上传图片后没有一点反应，体验性很差，图片回显也比较慢解决思路：通过XMLHttpRequest的progress来实现

深碍√TFBOYSˉ_/ 2023年02月24日 12:29/ 0 赞/ 62 阅读

相关 ajaxfileupload.js实现文件异步上传

html中： var param = $("inputForm").serialize(); url = $("inputForm").attr("actio

墨蓝/ 2022年09月24日 11:22/ 0 赞/ 309 阅读

相关 jquery ajax实现上传文件代码，带进度条

原文：[jquery ajax实现上传文件代码，带进度条][jquery ajax] 源代码下载地址：[http://www.zuidaima.com/share/155046

旧城等待，/ 2022年08月10日 15:56/ 0 赞/ 341 阅读

相关 springMVC+ajax 文件上传带进度条

前端代码 <script type="text/javascript"> function UpladFil

系统管理员/ 2022年07月24日 07:04/ 0 赞/ 427 阅读

相关【jQuery】Jquery.form.js实现表单异步提交以及文件上传（带进度条）

jquery.form.js是一个非常强大的用于表单提交的插件。通过该插件，我们可以非常简单的实现表单的异步提交，并实现文件上传、进度条显示等等。 [Jquery官网下载

傷城~/ 2022年07月14日 14:48/ 0 赞/ 213 阅读

相关【jQuery】Jquery.form.js实现表单异步提交以及文件上传（带进度条）

jquery.form.js是一个非常强大的用于表单提交的插件。通过该插件，我们可以非常简单的实现表单的异步提交，并实现文件上传、进度条显示等等。 [Jquery官网下载

ゝ一纸荒年。/ 2022年07月14日 14:48/ 0 赞/ 304 阅读

相关 springMVC+ajax 文件上传带进度条

转自：https://www.cnblogs.com/xiaochangwei/p/5239104.html 前端代码： ![复制代码][copycode.gif]

今天药忘吃喽~/ 2022年05月30日 09:30/ 0 赞/ 391 阅读

相关 HTML5 jQuery+FormData 异步上传文件，带进度条

[http://blog.csdn.net/michaelwubo/article/details/50865246][http_blog.csdn.net_michaelwu

布满荆棘的人生/ 2021年09月14日 20:06/ 0 赞/ 530 阅读