没有提交的图片上传进度条- Javascript

Question

我有一个 javascript 功能，可以显示图片预览并在 onchange 事件上自动上传（这部分工作正常）。

我想添加进度条。在这里搜索后，我只能找到使用提交按钮的解决方案。 File upload progress bar with jQuery

能不能帮我修改一下代码

谢谢

<input type="file" id="5_slika_upload" name="5_pocetna_slika_file" accept="image/*" />

function pocetna_slika_upload_select(){
    pocetna_slika_upload_div.style.display="flex";
    var reader = new FileReader();
    reader.onload = function() {
        var output = pocetna_slika_upload_div_img;
        output.src = reader.result;
    }
    reader.readAsDataURL(event.target.files[0]);
    
    var file_data = $('#5_slika_upload').prop('files')[0];   
    var form_data = new FormData();                  
    form_data.append('file', file_data);
    $.ajax({
            url: "https://markolucic.from.hr/image_upload.php",
            type: "POST",
            data: form_data,
            contentType: false,
            cache: false,
            processData:false,
            success: function(data){
                console.log(data);
            }
        });
        
    //add code for progress bar :)
        
}

Answer 1

您可以使用 $.ajax 的 xhr 参数设置上传进度事件处理程序并使用该数据创建进度条。

$.ajax({
        url: "https://markolucic.from.hr/image_upload.php",
        type: "POST",
        data: form_data,
        contentType: false,
        cache: false,
        processData:false,
        xhr:function(){
            var xhr = new XMLHttpRequest();
            xhr.upload.onprogress = function(e) {
                if (e.lengthComputable) {
                    var percentComplete = (e.loaded / e.total) * 100;
                    console.log(percentComplete);
                }
            };                
            return xhr;
        },
        success: function(data){
            console.log(data);
        }
    });

没有提交的图片上传进度条- Javascript

Image upload progress bar without submit- Javascript

javascript

ajax

file-upload

progress-bar