jquery+HTML5+Ajax实现带有进度条的文件上传功能
这次给大家带来jquery+HTML5+Ajax实现带有进度条的文件上传功能，jquery+HTML5+Ajax实现带有进度条文件上传功能的注意事项有哪些，下面就是实战案例，一起来看一下。
首先HTML5用AJAX提交数据先要学习一个HTML5新增加的对象：FormData
FormData 对象可以使用append 方法进行 key - value的数据添加，与以前我们常用的json不同的就是可以异步上传二进制文件。
1、FormDate对象的创建
var formData = new FormData();
2、向 FormDate 对象添加数据
formData.append("catname", "我是一只喵");
formData.append("age", 1); // 数字类型会转为字符串类型
// 可以增加上传的二进制文件，比如fileInputElement对象中已经包含了用户所选择的文件
formData.append("userfile", fileInputElement.files[0]);
//也可以将一个 Blob 对象添加到 formData 中
var oFileBody = "<a id="a"><b id="b">hey!</b></a>";
var oBlob = new Blob([oFileBody], { type: "text/xml"});
formData.append("webmasterfile", oBlob);3、使用 FormData 对象
var xhr = new XMLHttpRequest();
xhr.open("POST", "upload");
xhr.send(formData);HTML部分
FormData 对象简单的介绍完毕后，我们来看看页面的HTML代码是怎么写的
<img width="400" height="250"/><br /> <input type="file" id="pic" name="pic" onchange="showPic()"/> <input type="button" value="上传图片" onclick="uploadFile()" /><br /> <p id="parent"> <p id="son"></p> </p>
最下面的p是用来显示进度条的，所以需要对应的css样式。样式如下，颜色不好看，自己改吧：
<style type="text/css">
#parent{width:550px; height:10px; border:2px solid #09F;}
#son {width:0; height:100%; background-color:#09F; text-align:center; line-height:10px; font-size:20px; font-weight:bold;}
</style>JS部分
重头戏来了，在页面上加载上jquery后我们来看 JavaScript 是怎么写的，首先是 file 组件的 onchange事件方法：
function showPic(){
var pic = $("#pic").get(0).files[0];
$("img").prop("src" , window.URL.createObjectURL(pic) );
}showPic的第一行是从 file 对象得到上传文件 。 第二行则为 img 设置了src属性。 可以在页面中得到即时预览的效果。
在看 uploadFile 方法之前，再让我们简单学习一下进度事件 （Progress Events ）的progress 吧 ......
Progress Events规范是W3C的一个工作草案，定义了与客户端服务器通信有关的事件。这些事件最早其实值针对XHR操作，但目前也被其它API借鉴。有以下6个进度事件。
loadstart：在接收到相应数据的第一个字节时触发。
progress：在接收相应期间持续不断触发。 //我们就只看着一个好了
error：在请求发生错误时触发。
abort：在因为调用abort()方法而终止链接时触发。
load：在接收到完整的相应数据时触发。
loadend：在通信完成或者触发error、abort或load事件后触发。
progress事件是Mozilla提交的，这个事件会在浏览器接收新数据期间周期性地触发。而onprogress事件处理程序会接收到一个event对象，其target属性是XHR对象，但包含着三个额外的属性：
lengthComputable ：表示进度信息是否可用的布尔值
position ：表示已经接收的字节数
totalSize ：表示根据Content-Length相应头部确定的预期字节数。
有了这些信息，我们就可以为用户创建一个进度指示器了。但是 问题又来了， jQuery的 ajax 方法没有关于 progress 事件的操作。这怎么玩~~
好在通过查阅资料发现，jQuery的ajax方法调用的XMLHttpRequest对象是可以指定的！！！
看 8453行，就是它了。于是 uploadFile 方法的ajax部分的时候代码就变成了这个样式。
最重要的部分代码：
function uploadFile(){
// 获取上传文件，放到 formData对象里面
var pic = $("#myhead").get(0).files[0];
var formData = new FormData();
formData.append("file" , pic);
$.ajax({
type: "POST",
url: "upload",
data: formData , //这里上传的数据使用了formData 对象
processData : false,
//必须false才会自动加上正确的Content-Type
contentType : false ,
//这里我们先拿到jQuery产生的 XMLHttpRequest对象，为其增加 progress 事件绑定，然后再返回交给ajax使用
xhr: function(){
var xhr = $.ajaxSettings.xhr();
if(onprogress && xhr.upload) {
xhr.upload.addEventListener("progress" , onprogress, false);
return xhr;
}
}
});
}最后加上 onprogress 方法，为整个功能花上个句号。
/**
* 侦查附件上传情况 ,这个方法大概0.05-0.1秒执行一次
*/
function onprogress(evt){
var loaded = evt.loaded; //已经上传大小情况
var tot = evt.total; //附件总大小
var per = Math.floor(100*loaded/tot); //已经上传的百分比
$("#son").html( per +"%" );
$("#son").css("width" , per +"%");
}最后附上整个页面的代码，方便对比。
<!DOCTYPE html>
<html>
<head>
<title>html5_2.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
#parent{width:550px; height:10px; border:2px solid #09F;}
#son {width:0; height:100%; background-color:#09F; text-align:center; line-height:10px; font-size:20px; font-weight:bold;}
</style>
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type="text/javascript">
function showPic(){
var pic = $("#pic").get(0).files[0];
$("img").prop("src" , window.URL.createObjectURL(pic) );
uploadFile();
}
function uploadFile(){
var pic = $("#pic").get(0).files[0];
var formData = new FormData();
formData.append("file" , pic);
/**
* 必须false才会避开jQuery对 formdata 的默认处理
* XMLHttpRequest会对 formdata 进行正确的处理
*/
$.ajax({
type: "POST",
url: "upload",
data: formData ,
processData : false,
//必须false才会自动加上正确的Content-Type
contentType : false ,
xhr: function(){
var xhr = $.ajaxSettings.xhr();
if(onprogress && xhr.upload) {
xhr.upload.addEventListener("progress" , onprogress, false);
return xhr;
}
}
});
}
/**
* 侦查附件上传情况 ,这个方法大概0.05-0.1秒执行一次
*/
function onprogress(evt){
var loaded = evt.loaded; //已经上传大小情况
var tot = evt.total; //附件总大小
var per = Math.floor(100*loaded/tot); //已经上传的百分比
$("#son").html( per +"%" );
$("#son").css("width" , per +"%");
}
</script>
</head>
<body>
<img width="400" height="250"/><br />
<input type="file" id="pic" name="pic" onchange="showPic()"/>
<input type="button" value="上传图片" onclick="uploadFile()" /><br />
<p id="parent">
<p id="son"></p>
</p>
</body>
</html>相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
jQuery怎么读取XML文件内容
以上是jquery+HTML5+Ajax实现带有进度条的文件上传功能的详细内容。更多信息请关注PHP中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
微信文件过期怎么恢复 微信的过期文件能恢复吗
Feb 22, 2024 pm 02:46 PM
打开微信，在我中选择设置，选择通用后选择存储空间，在存储空间选择管理，选择要恢复文件的对话选择感叹号图标。教程适用型号：iPhone13系统：iOS15.3版本：微信8.0.24解析1首先打开微信，在我的页面中点击设置选项。2接着在设置页面中找到并点击通用选项。3然后在通用页面中点击存储空间。4接下来在存储空间页面中点击管理。5最后选择要恢复文件的对话，点击右侧的感叹号图标。补充：微信文件一般几天过期1要是微信接收的文件并没有点开过的情况下，那在七十二钟头之后微信系统会清除掉，要是己经查看了微信
照片无法打开此文件，因为格式不受支持或文件已损坏
Feb 22, 2024 am 09:49 AM
在Windows系统中，照片应用是一个便捷的方式来查看和管理照片和视频。通过这个应用程序，用户可以轻松访问他们的多媒体文件，而无需安装额外的软件。然而，有时候用户可能会碰到一些问题，比如在使用照片应用时遇到“无法打开此文件，因为不支持该格式”的错误提示，或者在尝试打开照片或视频时出现文件损坏的问题。这种情况可能会让用户感到困惑和不便，需要进行一些调查和修复来解决这些问题。当用户尝试在Photos应用程序上打开照片或视频时，会看到以下错误。抱歉，照片无法打开此文件，因为当前不支持该格式，或者该文件
可以删除Tmp格式文件吗？
Feb 24, 2024 pm 04:33 PM
Tmp格式文件是一种临时文件格式，通常由计算机系统或程序在执行过程中生成。这些文件的目的是存储临时数据，以帮助程序正常运行或提高性能。一旦程序执行完成或计算机重启，这些tmp文件往往就没有了存在的必要性。所以，对于Tmp格式文件来说，它们本质上是可以删除的。而且，删除这些tmp文件能够释放硬盘空间，确保计算机的正常运行。但是，在删除Tmp格式文件之前，我们需
出现0x80004005错误代码怎么办 小编教你0x80004005错误代码解决方法
Mar 21, 2024 pm 09:17 PM
在电脑中删除或解压缩文件夹，时有时候会弹出提示对话框“错误0x80004005：未指定错误”，如果遇到这中情况应该怎么解决呢？提示错误代码0x80004005的原因其实有很多，但大部分因为病毒导致，我们可以重新注册dll来解决问题，下面，小编给大伙讲解0x80004005错误代码处理经验。有用户在使用电脑时出现错误代码0X80004005的提示，0x80004005错误主要是由于计算机没有正确注册某些动态链接库文件，或者计算机与Internet之间存在不允许的HTTPS连接防火墙所引起。那么如何
斜杠和反斜杠在文件路径中的不同使用
Feb 26, 2024 pm 04:36 PM
文件路径是操作系统中用于识别和定位文件或文件夹的字符串。在文件路径中，常见的有两种符号分隔路径，即正斜杠（/）和反斜杠（）。这两个符号在不同的操作系统中有不同的使用方式和含义。正斜杠（/）是Unix和Linux系统中常用的路径分隔符。在这些系统中，文件路径是以根目录（/）为起始点，每个目录之间使用正斜杠进行分隔。例如，路径/home/user/Docume
夸克网盘的文件怎么转移到百度网盘？
Mar 14, 2024 pm 02:07 PM
夸克网盘和百度网盘都是现在最常用的储存文件的网盘软件，如果想要将夸克网盘内的文件保存到百度网盘，要怎么操作呢？本期小编整理了夸克网盘电脑端的文件转移到百度网盘的教程步骤，一起来看看是怎么操作吧。 夸克网盘的文件怎么保存到百度网盘？要将夸克网盘的文件转移到百度网盘，首先需在夸克网盘下载所需文件，然后在百度网盘客户端中选择目标文件夹并打开。接着，将夸克网盘中下载的文件拖放到百度网盘客户端打开的文件夹中，或者使用上传功能将文件添加至百度网盘。确保上传完成后在百度网盘中查看文件是否成功转移。这样就
hiberfil.sys是什么文件？hiberfil.sys可以删除吗？
Mar 15, 2024 am 09:49 AM
最近有很多网友问小编，hiberfil.sys是什么文件？hiberfil.sys占用了大量的C盘空间可以删除吗？小编可以告诉大家hiberfil.sys文件是可以删除的。下面就来看看详细的内容。hiberfil.sys是Windows系统中的一个隐藏文件，也是系统休眠文件。通常存储在C盘根目录下，其大小与系统安装内存大小相当。这个文件在计算机休眠时被使用，其中包含了当前系统的内存数据，以便在恢复时快速恢复到之前的状态。由于其大小与内存容量相等，因此它可能会占用较大的硬盘空间。 hiber
Linux系统查看log日志命令详解！
Mar 06, 2024 pm 03:55 PM
在Linux系统中，可以使用以下命令来查看日志文件的内容：tail命令：tail命令用于显示日志文件的末尾内容。它是查看最新日志信息的常用命令。tail[选项][文件名]常用的选项包括：-n：指定要显示的行数，默认为10行。-f：实时监视文件内容，并在文件更新时自动显示新的内容。示例：tail-n20logfile.txt#显示logfile.txt文件的最后20行内容tail-flogfile.txt#实时监视logfile.txt文件的更新内容head命令：head命令用于显示日志文件的开头
