JS案例之4——Ajax多图上传
近期项目中有好几次用到多图上传，第一次在项目中真正用到Ajax技术，稍微整理了下，贴个案例出来。
我们传统的做法是当用户提交一个表单时，就向web服务器端发送一个请求。服务器接受并处理传来的表单信息，处理完成后返回一个新的页面。这个做法比较浪费带宽，当请求数较多时，页面响应的时间就依赖于服务器处理的时间。
而Ajax应用仅向服务器发送并取回必需的数据，其他不需要的数据不用响应，它使用SOAP或其它一些基于XML的web service接口，并在客户端采用JS来处理来自服务器的响应。因此在服务器和浏览器之间交换的数据比较少，应用能很快速的响应。使用Ajax应用的最大特点是实现内容部分更新，不用刷新整个页面就能维护指定的数据，实现动态更新，这样能避免在网络上发送一些没有修改过的信息。Ajax应用的最大缺点是可能破坏浏览器后退按钮的正常行为。在Ajax中，JS主要用于将用户界面上的数据传递到服务器端，并处理返回来的结果。XMLHttpRequest对象用来响应通过http传递的数据，一旦数据返回到客户端就可以立刻使用DOM将数据放到页面上。
工作原理大致如下：
1.新建一个XMLHttpRequest 对象，用于直接与服务器通信。注意不同浏览器的不同写法。
xhr = new XMLHttpRequest();
2.向服务器发送请求，需要使用open()和send()。
open() 方法需要三个参数。第一个参数定义发送请求所使用的方法（GET 还是 POST）。第二个参数规定服务器端脚本的 URL。第三个参数规定应当对请求进行异步地处理。
send() 方法可将请求送往服务器。只有一个参数，为要发送的数据，如果没有数据，则传null。
xhr.open('POST',self.uploadURL,true);
xhr.send(formData); //formData为序列化的表单数据
3.定义onreadystatechange函数。XMLHttpRequest 对象的三个重要的属性:onreadystatechange(服务器响应的函数),readyState(服务器响应的状态),responseText(服务器返回的数据)
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){ //状态码为4时，表示请求已完成
self.cbUploadFile(xhr.responseText); //xhr.responseText表示服务器返回的数据，为JSON文本
}
}
案例截图：
源代码：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" Content="text/html; charset=utf-8;"> 5 <title> JS AJAX多图上传 </title> 6 <meta name="author" content="rainna" /> 7 <meta name="keywords" content="rainna's js lib" /> 8 <meta name="description" content="JS Ajax多图上传" /> 9 <style> 10 .m-imglist{margin:20px 0 0;} 11 .m-imglist img{float:left;width:200px;height:200px;margin:0 10px 10px 0;} 12 </style> 13 </head> 14 15 <body> 16 <form name="form" id="form"> 17 <input type="file" multiple /> 18 </form> 19 <div class="m-imglist" id="imglist"></div> 20 21 <script> 22 var uploadPic = { 23 upForm:document.getElementById('form'), 24 uploadIpt:document.getElementsByTagName('input')[0], 25 uploadURL:'http://upload.photo.163.com/upload/usere?sitefrom=lowerwerewog&responsetype=json&uswerinesize=3000x15000x0x100', 26 27 //开始上传 28 uploadFile:function(event){ 29 var self = this; 30 self.files = event.target.files || event.dataTransfer.files; 31 for(var i=0,l=self.files.length;i<l;i++){ 32 self.doUploadFile(self.files[i]); 33 } 34 }, 35 //执行上传 36 doUploadFile:function(file){ 37 if(!file) return; 38 var self = this, 39 xhr = new XMLHttpRequest(), //新建xhr对象 40 formData = new FormData(); //FormData()对象用于存放序列化的表单数据 41 formData.append('Filedata', file); 42 43 if(xhr.upload) { 44 //向服务器发送请求 45 xhr.open('POST',self.uploadURL,true); 46 xhr.send(formData); 47 48 xhr.onreadystatechange = function(){ 49 if(xhr.readyState == 4){ //状态码为4时，表示请求已完成 50 self.cbUploadFile(xhr.responseText); //xhr.responseText表示服务器返回的数据，为JSON文本 51 } 52 } 53 } 54 }, 55 //上传回调 56 cbUploadFile:function(text){ 57 var photo,userDef1Url,node; 58 var self = this; 59 photo = JSON.parse(text); 60 if(photo.resultcode == 999){ //成功上传 61 userDef1Url = photo.userDef1Url; //图片的url地址 62 node = new Image(); 63 node.src = userDef1Url; 64 } 65 document.getElementById('imglist').appendChild(node); 66 }, 67 //初始化 68 init:function(){ 69 var self = this; 70 self.uploadIpt.onchange = function(event){ 71 self.uploadFile(event); 72 } 73 } 74 }; 75 76 uploadPic.init(); 77 </script> 78 </body> 79 </html>
