基于HTML5 Ajax文件上传进度条如何实现(jquery版本)

在上篇文章给大家介绍了这篇文章里面的后台Servlet。所以这里只看前台的JS代码。

首先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 />
<div id="parent">
 <div id="son"></div>
</div>

最下面的div是用来显示进度条的,所以需要对应的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 />
 <div id="parent">
  <div id="son"></div>
 </div>
 </body>
</html>
时间: 2015-10-31

用Html5与Asp.net MVC上传多个文件的实现代码

复制代码 代码如下: <form action="/Home/Upload" enctype="multipart/form-data" id="form2" method="post"> <input type="file" name="fileToUpload" id="fileToUpload2" multiple="multiple

基于javascript html5实现多文件上传

本文实例为大家分享了javascript html5实现多文件上传的实现方法,具体内容如下 HTML结构: <div class="container"> <label>请选择一个图像文件:</label> <input type="file" id="file_input" multiple/> </div> 顺便说下这个上传的主要逻辑: 用input标签并选择type=file,记得

javascript html5移动端轻松实现文件上传

PC端上传文件多半用插件,引入flash都没关系,但是移动端要是还用各种冗余的插件估计得被喷死,项目里面需要做图片上传的功能,既然H5已经有相关的接口且兼容性良好,当然优先考虑用H5来实现. 用的技术主要是: ajax FileReader FormData HTML结构: <div class="camera-area"> <form enctype="multipart/form-data" method="post">

jQuery+HTML5实现图片上传前预览效果

本文实例讲述了jQuery+HTML5实现图片上传前预览效果.分享给大家供大家参考.具体如下: 这里主要是使用HTML5 的File API,建立一個可存取到该file的url,一个空的img标签,ID为img0,把选择的文件显示在img标签中,实现图片预览功能.请选择支持HTML API的浏览器,比如谷歌Chrome和火狐等. 运行效果如下图所示: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-html5-pic-upload-pre-view-c

Jquery结合HTML5实现文件上传

1.利用Jquery使用HTML5的FormData属性实现对文件的上传 在HTML5以前我们如果需要实现文件上传服务器等功能的时候,有时候我们不得不依赖于FLASH去实现,而在HTML5到来之后,我们很容易的实现对文件的上传,只需要利用HTML5的一个FormData属性,结合Jquery就很容易实现文件的上传,而且读取文件的上传进度,下面这个上传案例就是基于上面所说的实现的,下面我将所所有的JS和CSS以及HTML页面代码放在下面. 注意事项:FormData属性必须依赖于HTML5,所以如

Nodejs+express+html5 实现拖拽上传

一.前言 文件上传是一个比较常见的功能,传统的选择方式的上传比较麻烦,需要先点击上传按钮,然后再找到文件的路径,然后上传.给用户体验带来很大问题.html5开始支持拖拽上传的需要的api.nodejs也是一个最近越来越流行的技术,这也是自己第一次接触nodejs,在nodejs开发中,最常用的开发框架之一是expess,它是一个类似mvc模式的框架.结合html5.nodejs express实现了拖拽上传的功能. 二.基础知识普及 1.NodeJs基础知识 nodejs简单来说就是一个可以让j

IOS中html5上传图片方向问题解决方法

用html5编写图片裁切上传,在iphone手机上可能会遇到图片方向错误问题,在此把解决方法和大家分享一下, 用到了html5的 FileReader和Canvas,如果还没有接触的同学,先了解一下其方法. //此方法为file input元素的change事件 function change(){ var file = this.files[0]; var orientation; //EXIF js 可以读取图片的元信息 https://github.com/exif-js/exif-js

php+html5实现无刷新图片上传教程

本篇向大家介绍一种全新的上传图片的方式,利用html5的FileReader读取图片文件,然后将数据传输到服务器再使用PHP进行处理.实现过程如下(带图片预览功能) 前端html代码 upload,html <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content=&qu

HTML5+Canvas调用手机拍照功能实现图片上传(下)

上一篇只讲到前台操作,这篇专门涉及到Java后台处理,前台通过Ajax提交将Base64编码过的图片数据信息传到Java后台,然后Java这边进行接收处理,通过对图片数据信息进行Base64解码,之后使用流将图片数据信息上传至服务器进行保存,并且将图片的路径地址存进数据库. 大家可以点此链接查看前台本地压缩上传的处理: HTML5+Canvas+jQuery调用手机拍照功能实现图片上传(上) ok,废话不多说了,直接贴代码吧. 1.前台js代码: $.ajax({ async:false,//是

使用PHP和HTML5 FormData实现无刷新文件上传教程

无刷新文件上传是一个常见而又有点复杂的问题,常见的解决方案是构造 iframe 方式实现. 在 HTML5 中提供了一个 FormData 对象 API,通过 FormData 可以方便地构造一个表单请求,并通过 XMLHttpRequest 来发送.通过 FormData 对象发送文件也是可以的,如此则无刷新上传就变的非常简单了. 那么 FormData 怎么使用呢?下面我们对此进行简单的介绍. 1. 构造 FormData 对象 想得到一个FormData对象,很简单: var fd = n

ThinkPHP结合AjaxFileUploader实现无刷新文件上传的方法

本文实例讲述了ThinkPHP结合AjaxFileUploader实现无刷新文件上传的方法.分享给大家供大家参考.具体实现方法分析如下: 首先,AjaxFileUploader插件是一个基于jquery的插件,我们可以使用AjaxFileUploader插件来实现文件异步上传功能了,使用这款插件上传文件不要担心兼容性的问题,它的兼容性可以说兼容所有主流浏览器,下面来给大家介绍一个AjaxFileUploader+thinkphp实现文件上传的实例. ThinkPHP框架下用AjaxFileUpl

javascript仿163网盘无刷新文件上传系统

本来觉得这个系统会很复杂,但把每个部分都分析清楚后,其实需要的技术并不高.不过当我把各个功能函数都整理好准备进行封装时,却发现要把程序封装不是那么容易,因为程序跟html的耦合度太高.然后我逐步把程序中操作html相关的部分分离出来,首先把简单的分离,接着是文件列表,然后是file控件,最后是一些提示性程序.经过几次尝试才把整个结构封装好. 仿163网盘无刷新文件上传系统 .fu_list { width:600px; background:#ebebeb; font-size:12px; }

Asp.Net 无刷新文件上传并显示进度条的实现方法及思路

相信通过Asp.Net的服务器控件上传文件在简单不过了,通过AjaxToolkit控件实现上传进度也不是什么难事,为什么还要自己辛辛苦苦来 实现呢?我并不否认"拿来主义",只是我个人更喜欢凡是求个所以然.本篇将阐述通过Html,IHttpHandler和 IHttpAsyncHandler实现文件上传和上传进度的原理,希望对你有多帮助. 效果图: 本文涉及到的知识点:1.前台用到Html,Ajax,JQuery,JQuery UI 2.后台用到一般处理程序(IHttpHandler)和

php+ajax实现无刷新文件上传功能(ajaxuploadfile)

本文实例为大家分享了php+ajax实现无刷新文件上传的具体代码,供大家参考,具体内容如下 文件上传的表单格式 <form id="uploadform" enctype="multipart/form-data" name="uploadform" method="post" > <input id="fileToUpload" type="file" name=&q

asp.net 简便无刷新文件上传系统

ps:flash实现的效果是好得多,但这不是我研究的范围,也没什么可比性. 兼容:ie6/7/8, firefox 3.5.5, opera 10.01, safari 4.0.3, chrome 3.0 效果预览 文件上传 选择文件 重命名 操作 状态 重置 选择文件 重置 选择文件 重置 选择文件 ps:由于需要后台,要测试系统请下载实例测试. ps2:在完整实例文件中,还有一个文件属性查看实例. 程序说明 [upload] 程序中最重要的方法就是upload了,调用它就可以进行无刷新上传.

jQuery不使用插件及swf实现无刷新文件上传

文件上传是网站常用的功能,例如附件或图片的上传功能,解决方案也有很多,我们今天介绍一种通过jQuery无刷新的文件上传方式. 首先,我们在页面中放一个form,用来上传文件: 复制代码 代码如下: <form id="myForm" method="post" action="/asyncFileUpload/UploadHandler.ashx"     enctype="multipart/form-data" ta

利用H5特性FormData实现不刷新文件上传

之前朋友说的不刷新上传文件.最暴力的解决方案就是上网上搜各种JS库,附带多图上传,预览,甚至是图片处理等特技.那么如果不接触第三方的库,可不可以利用ajax来做.就这个问题,有人给出的解决方案是借助iframe,这里就不赘述了.但是Html5是个好东西,他提供了FormData,FormData可以帮助我们拼凑参数,乃至文件资源.这样,我们就可以轻松用$.ajax不刷新上传.当然也不需要iframe. 代码 下列是前端部分. <!DOCTYLE html> <meta charset=u

PHP Ajax实现无刷新附件上传

对一个网站而言,有一个基本的不可缺少的功能,那就是文件上传.使用PHP预压来实现文件上传可谓是有得天独厚的优势的,那么今天,就一起来做一个关于无刷新实现的文件上传吧. -------------------------------------------------------------------------------- 普通表单 前端页面 <form action="./fileupload.php" method="POST"> <p&g