jquery+HTML5+Ajax实现带有进度条的文件上传功能-js教程-PHP中文网

首页

web前端

js教程

jquery+HTML5+Ajax实现带有进度条的文件上传功能

php中世界最好的语言

Apr 23, 2018 pm 02:53 PM

h5文件

这次给大家带来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中文网其他相关文章！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

超越浏览器：现实世界中的JavaScriptApr 12, 2025 am 12:06 AM

JavaScript在现实世界中的应用包括服务器端编程、移动应用开发和物联网控制：1.通过Node.js实现服务器端编程，适用于高并发请求处理。2.通过ReactNative进行移动应用开发，支持跨平台部署。3.通过Johnny-Five库用于物联网设备控制，适用于硬件交互。

使用Next.js（后端集成）构建多租户SaaS应用程序Apr 11, 2025 am 08:23 AM

我使用您的日常技术工具构建了功能性的多租户SaaS应用程序（一个Edtech应用程序），您可以做同样的事情。首先，什么是多租户SaaS应用程序？多租户SaaS应用程序可让您从唱歌中为多个客户提供服务

如何使用Next.js（前端集成）构建多租户SaaS应用程序Apr 11, 2025 am 08:22 AM

本文展示了与许可证确保的后端的前端集成，并使用Next.js构建功能性Edtech SaaS应用程序。前端获取用户权限以控制UI的可见性并确保API要求遵守角色库

JavaScript：探索网络语言的多功能性Apr 11, 2025 am 12:01 AM

JavaScript是现代Web开发的核心语言，因其多样性和灵活性而广泛应用。1)前端开发：通过DOM操作和现代框架（如React、Vue.js、Angular）构建动态网页和单页面应用。2)服务器端开发：Node.js利用非阻塞I/O模型处理高并发和实时应用。3)移动和桌面应用开发：通过ReactNative和Electron实现跨平台开发，提高开发效率。

JavaScript的演变：当前的趋势和未来前景Apr 10, 2025 am 09:33 AM

JavaScript的最新趋势包括TypeScript的崛起、现代框架和库的流行以及WebAssembly的应用。未来前景涵盖更强大的类型系统、服务器端JavaScript的发展、人工智能和机器学习的扩展以及物联网和边缘计算的潜力。

神秘的JavaScript：它的作用以及为什么重要Apr 09, 2025 am 12:07 AM

JavaScript是现代Web开发的基石，它的主要功能包括事件驱动编程、动态内容生成和异步编程。1)事件驱动编程允许网页根据用户操作动态变化。2)动态内容生成使得页面内容可以根据条件调整。3)异步编程确保用户界面不被阻塞。JavaScript广泛应用于网页交互、单页面应用和服务器端开发，极大地提升了用户体验和跨平台开发的灵活性。