如何显示使用AJAX文件上传和jquery.form.js上传的MB数量?

时间:2016-08-12 11:36:32

标签: javascript jquery ajax malsup-ajax-form jquery.form.js

描述:

我正在使用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时)。

问题在于: -

:一种。 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显示。 enter image description here

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显示。 enter image description here

我做错了什么?为什么代码不能按预期工作? 它应该在大小小于1MB时显示KB,并在大小超过1 MB时显示MB。

1 个答案:

答案 0 :(得分:1)

在处理此类转换时,请勿进行硬编码。尝试找出一种自主的方式:

&#13;
&#13;
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>");
&#13;
&#13;
&#13;