纯H5 AJAX文件上传加进度条功能

片段 1片段 2

上传代码js部分

 //包上传
    $('.up_apk').change(function () {
        var obj = $(this);
        var form_data = new FormData();
        // 获取文件
        var file_data = obj.prop("files")[0];
        // 表单信息
        form_data.append("id", "001");
        form_data.append("name", "test");
        form_data.append("apk", file_data);
        if (file_data.type != 'application/vnd.android.package-archive') {
            alert('文件格式错误');
            return false;
        }
        $('.jdt').slideDown('fast');
        var size = Math.round(file_data.size / 1024 / 1024 * 100) / 100 + 'MB';
        $('.jdt .size').html(size);
        //提交
        $.ajax({
            type: "POST",
            url: 'url',
            dataType: "json",
            processData: false, // 注意：让jQuery不要处理数据
            contentType: false, // 注意：让jQuery不要设置contentType
            data: form_data,

            xhr: function () { //获取ajaxSettings中的xhr对象，为它的upload属性绑定progress事件的处理函数  
                myXhr = $.ajaxSettings.xhr();
                if (myXhr.upload) { //检查upload属性是否存在  
                    //绑定progress事件的回调函数  
                    myXhr.upload.addEventListener('progress', progressHandlingFunction, false);
                }
                return myXhr; //xhr对象返回给jQuery使用  
            },

            success: function (d) {
                if (d.code == 200) {
                    //处理返回信息
                } else {
                    alert(d.msg);
                }
                $('.jdt').slideUp('slow');
            },
            error: function (e) {
                alert("错误！！");
            }
        });
        function progressHandlingFunction(e) {
            var curr = e.loaded;
            var total = e.total;
            var wan = Math.round(curr / 1024 / 1024 * 100) / 100;
            var bfb = Math.round(curr / total * 10000) / 100;
            $('.jdt .wan').html(wan + 'MB');
            $('.jdt .bfb').html(bfb + '%');
            $('.jdt .jindu').css('width', bfb + '%');
        }

    });

html部分

<style>
    .jdt{display: none;}
    .jdtjd{width: 500px;height: 15px;margin: 20px 0;border:1px solid #0a8c8b;border-radius: 7px;}
    .jdtcs{width: 500px;height: 10px;text-align: center;color:#006400;margin-top: -49px;}
    .jdt i{font-style:normal;}
    .jdtjd .jindu{display: block;height: 15px;width: 0%; border-radius: 7px; background-color: #00ccca;z-index: -1;}
    .jdtcs .bfb{text-align: center;}
    .jdtcs .size{float: right;}
    .jdtcs .wan{float:left;}
</style>
<input  class="up_apk" type="file" value="本地上传" accept=".apk"/>                            
<div class="jdt">
      <div class="jdtjd"><i class="jindu"></i></div>
      <div class="jdtcs"><i class="wan">0MB</i><i class="bfb">0%</i><i class="size">0MB</i></div>
</div>

收藏

喜欢 0