javascript - 如何使用 AJAX 文件上传和 jquery.form.js 显示上传的 MB 量？

Question

描述:

我正在使用this插件(jquery.form.js)通过AJAX方法上传文件。 我已经实现了一个进度条，以百分比显示进度。 现在我也想以 KB/MB 为单位显示进度量。让我先分享我的代码，然后我进一步解释这个问题。

代码:

$('#validatefrm').submit(function(e) {
    $("#desc").val($('.Editor-editor').html()); 
        e.preventDefault();
        $('#loader-icon').show();
        $(this).ajaxSubmit({ 
            target:   '#targetLayer', 
            dataType: 'json',
            beforeSubmit: function() {
                if($('#image').val())
                    $("#progress-div").show();
                $("#progress-bar").width('0%');
            },
            uploadProgress: function (event, position, total, percentComplete){
                var disSize;
                $("#progress-bar").width(percentComplete + '%');
                $("#progress-bar").html('<div id="progress-status">'+ percentComplete +' %</div>');
                if(position=>1000000)
                {
                    disSize = (parseFloat(position)/1000000).toFixed(2)+' MB';
                }
                else if(position=>1000 && postion<1000000)
                {
                    disSize = (parseFloat(position)/1000).toFixed(2)+' KB';
                }
                $("#targetLayer").html(position + ' | ' +disSize);
            },
            success:function (data){
                var htmlMSG = '<b><span ';
                if(data.type == 1)
                {
                    htmlMSG += 'class="success-span"';
                }
                else
                {
                    htmlMSG += 'class="fail-span"';
                }
                htmlMSG += ' >'+capitalizeFirstLetter(data.msg)+'</span></b><br/>';
                htmlMSG += '<span class="msg-span">After closing this dialogue, you will be redirected to the listing page</span>';
                $('.message-section').html('');
                $('.message-section').append(htmlMSG);
                $('#loader-icon').hide();

                /*------ setting up the modal for redirection------*/
                $('#modal_entity').val('<?php echo $entity;?>'); 
                $('#modal_entity_id').val(data.post_id);
                $('#modal_redirect').val('true');   
                $('#myModal').modal('show'); 
                /*------ setting up the modal for redirection------*/

            },
            resetForm: false
        }); 
        return false; 
});

问题:

看看这个片段，

uploadProgress: function (event, position, total, percentComplete){
    var disSize;
    $("#progress-bar").width(percentComplete + '%');
    $("#progress-bar").html('<div id="progress-status">'+ percentComplete +' %</div>');
    if(position=>1000000)
    {
        disSize = (parseFloat(position)/1000000).toFixed(2)+' MB';
    }
    else if(position=>1000 && postion<1000000)
    {
        disSize = (parseFloat(position)/1000).toFixed(2)+' KB';
    }
    $("#targetLayer").html(position + ' | ' +disSize);
}

该位置显示数据量(以字节为单位)。我想将其转换为KB(当大小小于1MB时)和MB(当大小小于1MB时)。

问题是这样的:-

A.当 if else 代码是这样的时:-

 if(position=>1000000)
 {
    disSize = (parseFloat(position)/1000000).toFixed(2)+' MB';
 }
 else if(position=>1000 && postion<1000000)
 {
    disSize = (parseFloat(position)/1000).toFixed(2)+' KB';
 }

即使总大小小于 1 MB，数据也会以 MB 为单位显示。

B.当 if else 代码是这样的时:-

if(position=>1000 && postion<1000000)
{
   disSize = (parseFloat(position)/1000).toFixed(2)+' KB';
}
else if(position=>1000000)
{
   disSize = (parseFloat(position)/1000000).toFixed(2)+' MB';
}

即使总大小大于 MB，数据也会以 KB 为单位显示。

我做错了什么？为什么代码不能按预期工作？ 小于1MB时显示KB，大于1MB时显示MB。

Answer 1

在处理这种类型的转换时，切勿进行硬编码。尝试找出一种自主的方式来做到这一点:

function SizeToText(size){
	var sizeContext = ["B", "KB", "MB", "GB", "TB"],
		atCont = 0;
	
	while(size / 1024 > 1){
		size /= 1024; 
		++atCont;
	}
	
	return Math.round(size*100)/100 + sizeContext[atCont];
}

document.write(SizeToText(1000)+"<br>");
document.write(SizeToText(1000000)+"<br>");
document.write(SizeToText(10000000)+"<br>");