纯H5 AJAX文件上传加进度条功能
上传代码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>
纯H5 AJAX文件上传加进度条功能的更多相关文章
- springMVC+ajax 文件上传 带进度条
前端代码: <form id= "uploadForm"> <p >指定文件名: <input type="text" name= ...
- jquery 实现拖动文件上传加进度条
通过对文件的拖动实现文件的上传,主要用到的是HTML5的ondrop事件,上传内容通道FormData传输: //进度条 <div class="parent-dlg" &g ...
- layui 文件上传加进度条
1.页面 <div class="layui-row layui-col-space5"> <div class="layui-form-item&qu ...
- atitit.文件上传带进度条的实现原理and组件选型and最佳实践总结O7
atitit.文件上传带进度条的实现原理and组件选型and最佳实践总结O7 1. 实现原理 1 2. 大的文件上传原理::使用applet 1 3. 新的bp 2 1. 性能提升---分割小文件上传 ...
- atitit. 文件上传带进度条 atiUP 设计 java c# php
atitit. 文件上传带进度条 atiUP 设计 java c# php 1. 设计要求 1 2. 原理and 架构 1 3. ui 2 4. spring mvc 2 5. springMVC.x ...
- HTML5 + AJAX ( jQuery版本 ) 文件上传带进度条
页面技术:HTML5 + AJAX ( jQuery) 后台技术:Servlet 3.0 服务器:Tomcat 7.0 jQuery版本:1.9.1 Servlet 3.0 代码 package or ...
- ajax异步文件上传和进度条
一.ajax异步文件上传 之前有说过在form表单内的文件上传,但是会刷新页面,下面就来实现不刷新页面的异步文件上传 <div class="uploding_div"> ...
- Springboot 文件上传(带进度条)
1. 相关依赖 pom.xml <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http ...
- HTML5文件上传还有进度条
以下是自学it网--中级班上课笔记 网址:www.zixue.it 需要在chrome,ff,IE10下运行 html页面 <!DOCTYPE html> <html lang=&q ...
随机推荐
- JavaScript数字计算精度丢失的问题和解决方案
一.JS数字精度丢失的一些典型问题 1. 两个简单的浮点数相加:0.1 + 0.2 != 0.3 // true,下图是firebug的控制台截图: 看看java的计算结果:是不是让你很不能接受 再来 ...
- leetcode题目2.两数相加(中等)
题目描述: 给出两个 非空 的链表用来表示两个非负的整数.其中,它们各自的位数是按照 逆序 的方式存储的,并且它们的每个节点只能存储 一位 数字. 如果,我们将这两个数相加起来,则会返回一个新的链表来 ...
- idea出现灰色或者黄色的波浪线如何去除
1.File--setting--Editor-Inspections-Geneal-Duplicated Code 去除 主要是类中出现太多的重复代码,idea自动提示.
- DP&图论 DAY 1 下午
DP&图论 DAY 1 下午 区间和序列上的DP 序列上的DP >序列上的dp状态设计最基本的形式 F[i]表示以 i 结尾的最优值或方案数.◦ F[i][k]表示以 i 结尾附加 ...
- win10搜索框突然不能使用了
备忘: win10搜索不出来了,使用以下方法恢复了,备忘下 1,首先打开任务管理器 重新启动wservice服务 2.发现这时候搜索依然不能使用 然后重新启动explorer.exe (1)右键关闭该 ...
- 日志框架之Logger
概述 在我们日常的开发中,肯定是少不了要和 Log 打交道,回想一下我们是怎么使用 Log 的:先定义一个静态常量 TAG,TAG 的值通常是当前类的类名,然后在需要打印 Log 的地方,调用 Log ...
- php怎样获取当前页面文件名
因开发需要,常需要获取当前php文件的文件名.php获取当前文件名方法很简单,程序代码如下: <?php function php_self(){ $php_self=substr($_SERV ...
- Jmeter建立一个扩展LDAP测试计划
Jmeter建立一个扩展LDAP测试计划 添加用户 第一步你想做的每一个JMeter测试计划是添加一个线程组元素. 线程组告诉JMeter的用户数量你想模拟,用户应该发送的次数 请求,他们应该发送的请 ...
- python多进程——进程间通信
(一)进程锁 抢票的例子: # -*- coding:utf-8 -*- from multiprocessing import Process, Lock import time import js ...
- Python:Django 项目中可用的各种装备和辅助
1 Redis 数据库 2 MySQL 数据库 3 前端服务器 live-server 4 定时任务 django-crontab扩展 5 Docker 容器 --用来运行 FastDFS 分布式文件 ...