jquery特效 - JavaScript 进度条应该怎么做，那些数据大小怎么获取，然后计算百分百

Question

如题，如果是图片，那么加载的百分比=目前图片张数/总的张数，如果是其他数据，应该怎么算？

Answer 1

文件总体积获取方法：

1、如果是用input file获取的文件，file对象会包含文件的体积的，这个只要读取file文件的属性就行，比如var size = $('input[type=file]')[0].files[0].size;
2、如果是字符串可以用下面这两个方法：

//获取字符串字节数(区分中英文) 中文算2个字,英文一个
var strLength = function(str){
    var cArr = str.match(/[^\x00-\xff]/ig);
    return str.length + (cArr == null ? 0 : cArr.length);
};
//计算字符串的字节数（听说这个效率比上面那个高）
var strByte = function(str){
    if(str){
        for(var i= 0,byte=0,len=(str.length||0); i<len; i++){
            byte += (str.charCodeAt(i)>255?2:1);
        }
        return byte;
    }else
        return 0;
};

3、如果是对象，就用JSON.stringify()转为字符串之后再用上面的方法吧，因为要传到服务器，也是要转为字符串传的。

说实话，要计算已经处理的字符数要根据实际情况来，大致你也可以使用上面的方法。
已经上传的字符数这样做：

$.ajax({
        url: url,  //服务器的接口
        type: 'POST',
        xhr: function(){
            var myXhr = $.ajaxSettings.xhr();
            if(myXhr.upload){ //检查上传属性是否存在
                myXhr.upload.addEventListener('progress',function(e){
                    if(e.lengthComputable){
                        var percent = Math.floor(e.loaded/e.total*100) + '%';//上传进度%
                    }
                }, false); //处理上传进度的函数。
            }
            return myXhr;
        },
        //Ajax事件
        complete: function(data){
            //完成上传后的动作
        },
        data: data,//这里的数据格式必须是Form，如果不是form，则用js实例化一个
        //Options to tell JQuery not to process data or worry about content-type
        cache: false,
        contentType: false,
        processData: false
    });
    

界面展示

写一个p包一个p，内里p的宽度用百分比显示，每次有新的进度时，百分比是多少，则内里p的百分比就是多少。

Answer 2

可以利用jquery的deferred.progress().
$.ajax().done().fail().progress();
参考文档： http://www.css88.com/jqapi-1.9/deferred.progress/
Demo(用到了jquery UI progerssbar 控件，没有用ajax) http://jsfiddle.net/etianqq/95aj7cde/

Answer 3

最外面p管整个的宽度，里面的p给width来管进度条的长度，百分比多少他就宽多少。
其实做前端很有必要去看看bootstrap里一些效果的实现。很有启发性的。

Answer 4

楼上都答非所问。在一个网页中影响加载进度的有很多方面，图片是影响比例大且比较好计算，一般的进度条也是以图片的加载计算。其他方面的不清楚

Answer 5

两个p，外面的p宽度100%，内部p由js控制width属性，加上background-color就很明显了

Answer 6

根据当前文件大小/总文件大小?

Answer 7

两层重叠span，底层为进度条空槽图片，上层为进度条进度显示有颜色图片，上层用width:x% 控制颜色图片的百分比

Answer 8

凡事都有个总数吧

因此要依情况而论，不同环境有不同的获取当前进度和总数的方法。在具体场景中依文档说的写就是了。

Answer 9

好像所有的进度条都是骗人的。