在上一篇文章中,我介绍了本文中的背景Servlet。所以这里我们只看前台的JS代码。
首先,HTML5用AJAX提交数据。首先,它需要学习HTML5新增加的一个对象:FormData。
FormData对象可以使用append方法添加键值数据。与之前常用的json不同,它可以异步上传二进制文件。
1.创建FormDate对象。
var formData=new formData();2.向FormDate对象添加数据。
FormData.append('catname ','我是喵喵');formData.append('age ',1);//数字类型将转换为字符串类型。//可以添加上传的二进制文件。例如,文件输入远程对象已经包含用户选择的文件formdata.append ('userfile ',file inputrement . files[0]);//还可以向formData添加Blob对象。var ofile body=' a id=' a' b id=' 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 ' on change=' show pic()'/input type=' button ' value=' upload picture ' on click=' upload file()'/Br/div id=' parent ' div id=' son '/div/div底部的div用于显示进度条,因此需要对应的css样式。风格如下。颜色不好看。自己改。
style type=' text/CSS ' # parent { width :550 px;height:10pxborder:2px实心# 09F} # son { width:0高度:100%;背景色-: # 09F;文本对齐:居中;线高:10 px;font-size :20 px;font-weight : bold;} /styleJS部分。
好戏来了。在页面上加载jquery后,让我们看看JavaScript是如何编写的。首先,文件组件的onchange事件方法:
函数showPic(){ var pic=$('#pic ')。获取(0)。文件[0];$('img ')。道具(' src ',窗口。URL . createobjecturl(pic));}showPic的第一行是从file对象获取上传的文件。在第二行中,为img设置了src属性。您可以在页面上获得即时预览。
在查看uploadFile方法之前,让我们简单研究一下Progress Events的进度。
进度事件规范是W3C的工作草案,它定义了与客户机-服务器通信相关的事件。这些事件的实际值原本是针对XHR运营的,但目前其他API也在借鉴。下面有6个进度事件。
Loadstart:当接收到相应数据的第一个字节时触发。进度:在相应的接收周期内连续触发。//我们只看一个错误:当请求中出现错误时触发。中止:通过调用中止()方法终止链接时触发。加载:收到完整的对应数据时触发。Loadend:在通信完成或触发错误、中止或加载事件后触发。
进度事件由Mozilla提交,在浏览器接收新数据期间定期触发。Onprogress事件处理程序将接收一个目标属性为XHR对象的事件对象,但它包含三个附加属性:
LengthComputable:布尔值,指示进度信息是否可用。
位置:指示已接收的字节数。
TotalSize:表示根据Content-Length的对应头确定的预期字节数。
有了这些信息,我们可以为用户创建一个进度指示器。但问题来了。jQuery的ajax方法对进度事件没有操作。怎么在这里玩~ ~
好在通过查阅资料,发现jQuery的ajax方法调用的XMLHttpRequest对象是可以指定的!
看第8453行,就是这样。所以当uploadFile文件方法的ajax部分时,代码就变成了这种风格。
代码中最重要的部分:
函数uploadFile(){//获取上传文件,放到表单数据对象里面var pic=$('#myhead ').获取(0)。文件[0];var formData=new formData();formData.append('file ',pic);$.ajax({type: 'POST ',url: 'upload ',data: formData,//这里上传的数据使用了表单数据对象processData : false,//必须错误的才会自动加上正确的内容类型内容类型:假,//这里我们先拿到jQuery产生的XMLHttpRequest对象,为其增加进步事件绑定,然后再返回交给创建交互式、快速动态网页应用的网页开发技术使用xhr:函数(){ var xhr=$。AJaxsettings。xhr();if(onprogress xhr。上传){ xhr。上传。addeventlistener(' progress ',on progress,false);返回xhr } } });}最后加上进度方法,为整个功能花上个句号。
/** * 侦查附件上传情况,这个方法大概0.05-0.1秒执行一次*/函数进行中(evt){ var loaded=evt。已加载;//已经上传大小情况var tot=evt.total//附件总大小var per=数学。楼层(100 *负载/总重量);//已经上传的百分比$('#son ').html(根据"%");$('#son ').css('width ',per ' % ');}最后附上整个页面的代码,方便对比。
!DOCTYPE html html标题html 5 _ 2。html/title meta http-equiv=' content-type ' content=' text/html;charset=UTF-8 ' style type=' text/CSS ' # parent { width :550 px;高度:10pxborder:2px实心# 09F} # son { width:0高度:100%;背景色-: # 09F;文本对齐:居中;线高:10 pxfont-size :20 px字体粗细:加粗;}/style脚本类型=' text/JavaScript ' src=' http : js/jquery-1。9 .1 .js '/script脚本类型=' text/JavaScript '函数show pic(){ var pic=$(' # pic ').获取(0)。文件[0];$('img ').道具(“src”,窗口网址。createobjecturl(pic));uploadFile();}函数uploadFile(){ var pic=$('#pic ').获取(0)。文件[0];var formData=new formData();formData.append('file ',pic);/** * 必须错误的才会避开jQuery对表单数据的默认处理* XMLHttpRequest会对表单数据进行正确的处理*/$.ajax({ type: 'POST ',url: 'upload ',data: formData,processData : false,//必须错误的才会自动加上正确的content-Type content Type : false,xhr : function(){ var xhr=$。AJaxsettings。xhr();if(onprogress xhr。上传){ xhr。上传。addeventlistener(' progress ',on progress,false);返回xhr } } });} /** * 侦查附件上传情况,这个方法大概0.05-0.1秒执行一次*/函数进行中(evt){ var loaded=evt。已加载;//已经上传大小情况var tot=evt.total//附件总大小var per=数学。楼层(100 *负载/总重量);//已经上传的百分比$('#son ').html(根据"%");$('#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