纯H5 AJAX文件上传加进度条功能
//包上传 $('.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 + '%'); } });
<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>
相关推荐
-
指定html转换成pdf javascript
2019-1-7
-
js日期相关方法 javascript
2019-1-8
-
图片放大器源码 javascript
2019-1-7
-
打开网页复制和粘贴功能 javascript
2019-1-8
-
js计算器 javascript
2019-1-7
-
JavaScript浮点运算,小数点精度 javascript
2019-1-7
-
js浮点数加减乘除 javascript
2019-1-8
-
单个条目中的值传到模态框 javascript
2019-1-7
-
JavaScript通用工具类 javascript
2019-1-7
-
React 的事件测试代码 javascript
2019-1-7