图片上传的简单进度“栏” - 立即达到 100% [重复]

Posted 2023-05-08

【中文标题】图片上传的简单进度“栏” - 立即达到 100% [重复]

【英文标题】：simple progress 'bar' for image upload -- immediately at 100% [duplicate]

【发布时间】：2015-10-23 14:03:58

【问题描述】：

我正在尝试在我的 php 图像上传中添加一个简单的进度条/数字。如果启用了javascript，这个脚本应该可以工作，但现在，它立即显示100%，在所有内容上传之前，然后显示“正在处理图像”，我认为也为时过早。

一定有问题：

$('form#uploadform').submit(function()
var formdata = $('form#uploadform').serialize();
$('p.isloading').show();

$.ajax(
xhr: function () 
    var xhr = new window.XMLHttpRequest();
    xhr.upload.addEventListener("progress", function (evt) 
        if (evt.lengthComputable) 
            var percentComplete = evt.loaded / evt.total;
            $('#uploadprogress').text(percentComplete * 100 + '%');
        
    , false);
    xhr.addEventListener("progress", function (evt) 
        if (evt.lengthComputable) 
            var percentComplete = evt.loaded / evt.total;
            $('#uploadprogress').text(percentComplete * 100 + '%');
        
    , false);
    return xhr;
,
type: 'POST',
url: "/upload",
data: formdata,
success: function (data)  $('#uploadprogress').text('images are being processed'); 
);
//return false;
);

我想要一个简单的方法来显示已经上传了多少，但似乎我做错了。任何帮助表示赞赏。

【问题讨论】：

你好，这个插件可以为你使用完整的。 malsup.com/jquery/form/#file-upload

在小提琴上显示一个工作示例？

如果我没记错的话，服务器需要一个模块才能工作。

我正在使用该插件。

【参考方案1】：

这个答案在@Amarnadh Meda 提供的链接上。

JavaScript -

$(function() 

var bar = $('.bar');
var percent = $('.percent');
var status = $('#status');

$('form').ajaxForm(
    beforeSend: function() 
        status.empty();
        var percentVal = '0%';
        bar.width(percentVal);
        percent.html(percentVal);
    ,
    uploadProgress: function(event, position, total, percentComplete) 
        var percentVal = percentComplete + '%';
        bar.width(percentVal);
        percent.html(percentVal);
    ,
    complete: function(xhr) 
        status.html(xhr.responseText);
    
);
); 

HTML -

<form action="file-echo2.php" method="post" enctype="multipart/form-data">
    <input type="file" name="myfile"><br>
    <input type="submit" value="Upload File to Server">
</form>

<div class="progress">
    <div class="bar"></div >
    <div class="percent">0%</div >
</div>

<div id="status"></div>

编辑#1：

在这里找到了类似的问题。 File upload progress bar with jQuery