web文件上传，带进度条
原生ajax上传带进度条 (百分比)
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>文件上传 原生ajax上传</title>
<style type="text/css">
.container{
width: 200px;
height: 20px;
background-color: gray;
}
#progress{
height: 20px;
background-color: orange;
display: inline-block;
} </style>
</head>
<body>
<form action="${pageContext.request.contextPath }/upload"
enctype="multipart/form-data" method="post">
上传文件1: <input type="file" name="file1" id="file"><br />
<div class='container'>
<span id="progress"></span>
</div>
</form>
<br>
<button onclick="fileSelected()">文件信息</button><button onclick="uploadFile()">确认上传</button>
<div id="info">
<div id="fileName"></div>
<div id="fileSize"></div>
<div id="fileType"></div>
</div>
<div id="result"></div>
<script>
function fileSelected() {
var file = document.getElementById('file').files[0];
if (file) {
var fileSize = 0;
if (file.size > 1024 * 1024)
fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString() + 'MB';
else
fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + 'KB';
document.getElementById('fileName').innerHTML = 'Name: ' + file.name;
document.getElementById('fileSize').innerHTML = 'Size: ' + fileSize;
document.getElementById('fileType').innerHTML = 'Type: ' + file.type;
}
}
function uploadFile() {
var fd = new FormData();
fd.append("file", document.getElementById('file').files[0]);
var xhr = new XMLHttpRequest();
xhr.upload.addEventListener("progress", uploadProgress, false);
xhr.addEventListener("load", uploadComplete, false);
xhr.addEventListener("error", uploadFailed, false);
xhr.addEventListener("abort", uploadCanceled, false);
xhr.open("POST", "${pageContext.request.contextPath }/upload");//修改成自己的接口
xhr.send(fd);
} function uploadProgress(evt) {
if (evt.lengthComputable) {
var percent = Math.round(evt.loaded * 100 / evt.total); document.getElementById('progress').innerHTML = percent.toFixed(2) + '%';
document.getElementById('progress').style.width = percent.toFixed(2) + '%';
}
else {
document.getElementById('progress').innerHTML = 'unable to compute';
}
}
function uploadComplete(evt) {
/* 服务器端返回响应时候触发event事件*/
document.getElementById('result').innerHTML = evt.target.responseText;
}
function uploadFailed(evt) {
alert("There was an error attempting to upload the file.");
}
function uploadCanceled(evt) {
alert("The upload has been canceled by the user or the browser dropped the connection.");
}
</script> </body>
</html>
Jquery ajax上传带进度条 (bytes进度)
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>文件上传 jquery上传</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<style type="text/css">
.container{
width: 200px;
height: 20px;
background-color: gray;
}
#progress{
height: 20px;
background-color: orange;
display: inline-block;
} </style>
</head>
<body>
<form action="${pageContext.request.contextPath }/upload"
enctype="multipart/form-data" method="post">
上传文件1: <input type="file" name="file1"><br />
<div class='container'>
<span id="progress"></span>
</div>
</form>
<br>
<button onclick="upload()">确认上传</button>
<div id="info"></div>
<div id="result"></div>
<script>
var totalSize = 0; //绑定所有type=file的元素的onchange事件的处理函数
$(':file').change(function() {
var file = this.files[0]; //假设file标签没打开multiple属性，那么只取第一个文件就行了
name = file.name;
size = file.size;
type = file.type;
url = window.URL.createObjectURL(file); //获取本地文件的url，如果是图片文件，可用于预览图片 totalSize += size;
$("#info").html("文件名：" + name + "<br>文件类型：" + type + "<br>文件大小：" + size + "<br>url: " + url); }); function upload() {
//创建FormData对象，初始化为form表单中的数据。需要添加其他数据可使用formData.append("property", "value");
var formData = new FormData($('form')[0]); //ajax异步上传
$.ajax({
url: "${pageContext.request.contextPath }/upload",
type: "POST",
data: formData,
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(result){
$("#result").html(result);
},
contentType: false, //必须false才会自动加上正确的Content-Type
processData: false //必须false才会避开jQuery对 formdata 的默认处理
});
} //上传进度回调函数：
function progressHandlingFunction(e) {
if (e.lengthComputable) {
$('#progress').attr({value : e.loaded, max : e.total}); //更新数据到进度条
var percent = e.loaded/e.total*100;
$('#progress').html(e.loaded + "/" + e.total+" bytes. " + percent.toFixed(2) + "%");
$('#progress').css('width', percent.toFixed(2) + "%");
}
}
</script>
</body>
</html>
转 : https://www.cnblogs.com/h--d/p/Web.html
https://www.cnblogs.com/zhangyongl/p/8312881.html
web文件上传，带进度条的更多相关文章
- 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 ...
- Springboot 文件上传(带进度条)
1. 相关依赖 pom.xml <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http ...
- Struts2文件上传带进度条，虽然不是很完美
好久没有写东西,最近在做个项目,要用到文件h 传的,以前虽然也做上传,但是总觉得不好用 ,现在和队友合作做了一个带进度条的上传,觉得还行~~和大家分享一下. 首先说一下大概是这样实现的,在我们平时的上 ...
- springMVC+ajax 文件上传 带进度条
前端代码: <form id= "uploadForm"> <p >指定文件名: <input type="text" name= ...
- Flex4/Flash多文件上传(带进度条)实例分享
要求 必备知识 本文要求基本了解 Adobe Flex编程知识和JAVA基础知识. 开发环境 MyEclipse10/Flash Builder4.6/Flash Player11及以上 演示地址 演 ...
- HTML5 + AJAX ( jQuery版本 ) 文件上传带进度条
页面技术:HTML5 + AJAX ( jQuery) 后台技术:Servlet 3.0 服务器:Tomcat 7.0 jQuery版本:1.9.1 Servlet 3.0 代码 package or ...
- php实现大文件上传带进度条
1.使用PHP的创始人 Rasmus Lerdorf 写的APC扩展模块来实现(http://pecl.php.net/package/apc) APC实现方法: 安装APC,参照官方文档安装,可以使 ...
- struts2多文件上传(带进度条)demo+说明
利用plupload插件实现多文件上传,实现图片: 在jsp写入js代码: z<%@ page language="java" contentType="text/ ...
- html5 文件上传 带进度条
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- C#入门概述
ASP.NET 则是一种技术. Main方法 代码编写规范 命名规范
- Flask统计代码行数
流程: 1.获取前端的文件 2.判断文件是否zip文件 3.解压压缩包并保存 4.遍历解压后的文件夹 5.判断文件是否py文件,将绝对路径添加到列表 6.循环列表,排除注释和空号,统计行数 from ...
- vim小结
1.工作模式 命令模式 编辑模式 一般模式 2.配置文件 :set nu / :set nonu 显示与取消行号 :syntax on / :syntax off 是否依据语法显示相关的颜色帮 ...
- SOAP知识点
SOAP简介: SOAP 是基于 XML 的简易协议,可使应用程序在 HTTP 之上进行信息交换. 或者更简单地说:SOAP 是用于访问网络服务的协议. 1.什么是 SOAP? SOAP 指简易对象访 ...
- ts介绍
typescript是微软开发的一门编程语言,它是javascrip的一个超集,它遵循最新的es6脚本语言规范,typescript扩展了javascript的语法,任何已经存在的javascipt程 ...
- RQM — 需求驱动的测试管理工具
嵌入式系统复杂程度越来越高,随之而来的测试要求和任务也越来越繁重,而测试更多的是对产品满足需求情况的测试,因此,在高强度.高频度的测试过程中,难免有需求遗漏.回归测试不充分.缺陷管理不合理.测试人员疏 ...
- 一个Python小白如何快速完成爬虫
很人或多或少都听说过python爬虫,但不知道如何通过python爬虫来爬取自己想要的内容,今天我就给大家说一个爬虫教程来实现自己第一次python爬虫. 环境搭建 既然用python,那么自然少不了 ...
- Python正则提取数据单引号内数据,并判断是否是空列表(是否提取到数据)
#coding=utf- import re string1="asdfgh'355'dfsfas" string2="fafafasfasdfasdf" pa ...
- 2019-2020-1 20199301《Linux内核原理与分析》第六周作业
第五章 系统调用的三层机制(下) 1.给MenuOS增加命令 代码如下: rm -rf menu git clone http://github.com/mengning/menu.git make ...
- 「SDOI2016」征途
征途 Pine开始了从S地到T地的征途. 从S地到T地的路可以划分成\(n\)段,相邻两段路的分界点设有休息站. Pine计划用\(m\)天到达T地.除第\(m\)天外,每一天晚上Pine都必须在休息 ...