近期项目中有好几次用到多图上传，第一次在项目中真正用到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文本
　　}
}

案例截图：

源代码：

 <!DOCTYPE html>

 <html>

 <head>

 <meta http-equiv="Content-Type" Content="text/html; charset=utf-8;">

 <title> JS AJAX多图上传 </title>

 <meta name="author" content="rainna" />

 <meta name="keywords" content="rainna's js lib" />

 <meta name="description" content="JS Ajax多图上传" />

 <style>

 .m-imglist{margin:20px 0 0;}

 .m-imglist img{float:left;width:200px;height:200px;margin:0 10px 10px 0;}

 </style>

 </head>

 <body>

 <form name="form" id="form">

     <input type="file" multiple />

 </form>

 <div class="m-imglist" id="imglist"></div>

 <script>

 var uploadPic = {

     upForm:document.getElementById('form'),

     uploadIpt:document.getElementsByTagName('input')[0],

     uploadURL:'http://upload.photo.163.com/upload/usere?sitefrom=lowerwerewog&responsetype=json&uswerinesize=3000x15000x0x100',

     //开始上传

     uploadFile:function(event){

         var self = this;

         self.files = event.target.files || event.dataTransfer.files;

         for(var i=0,l=self.files.length;i<l;i++){

             self.doUploadFile(self.files[i]);

         }

     },

     //执行上传

     doUploadFile:function(file){

         if(!file) return;

         var self = this,

             xhr = new XMLHttpRequest(),    //新建xhr对象

             formData = new FormData();       //FormData()对象用于存放序列化的表单数据

         formData.append('Filedata', file);

         if(xhr.upload) {

             //向服务器发送请求

             xhr.open('POST',self.uploadURL,true);

             xhr.send(formData);

             xhr.onreadystatechange = function(){

             　　if(xhr.readyState == 4){      //状态码为4时，表示请求已完成

             　　　　self.cbUploadFile(xhr.responseText);       //xhr.responseText表示服务器返回的数据，为JSON文本

             　　}

             }

         }

     },

     //上传回调

     cbUploadFile:function(text){

         var photo,userDef1Url,node;

         var self = this;

         photo = JSON.parse(text);

         if(photo.resultcode == 999){       //成功上传

             userDef1Url = photo.userDef1Url;   //图片的url地址

             node = new Image();

             node.src = userDef1Url;

         }

         document.getElementById('imglist').appendChild(node);

     },

     //初始化

     init:function(){

         var self = this;

         self.uploadIpt.onchange = function(event){

             self.uploadFile(event);

         }

     }

 };

 uploadPic.init();

 </script>

 </body>

 </html>

JS案例之4——Ajax多图上传的更多相关文章

  1. ajax多图上传

    百度云代码 参考:https://segmentfault.com/q/1010000004218827

  2. python django + js 使用ajax进行文件上传并获取上传进度案例

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. ajaxfileupload.js插件结合一般处理文件实现Ajax无刷新上传

    先上几张图更直观展示一下要实现的功能.本功能主要通过Jquery ajaxfileupload.js插件结合ajaxUpFile.ashx一般应用程序处理文件实现Ajax无刷新上传功能,结合NPOI2 ...

  4. Bootstrap+PHP fileinput 实现多图上传 这是ajax上传，只能单张单张图片地上传

    插件及源代码可以在这里下载 http://www.jq22.com/jquery-info5231下面是根据下载的demo进行补充:使用bootstrap界面美观,可预览,可拖拽上传,可配合ajax异 ...

  5. js formData图片上传（单图上传、多图上传）后台java

    单图上传 <div class="imgUp">     <label>头像单图</label>     <input type=&quo ...

  6. PHP 多图上传，图片批量上传插件，webuploader.js，百度文件上传插件

    PHP  多图上传,图片批量上传插件,webuploader.js,百度文件上传插件(案例教程) WebUploader作用:http://fex.baidu.com/webuploader/gett ...

  7. thinkphp5多图上传 js部分

    在项目中常会用到多图上上传,那就需要多图上传后需要预览,并且能删掉传错(不想传)的图,然而 测试了半天 并不知道jq怎么写,parent()parents()用了半天无果,罢了,还是用原生js来写.这 ...

  8. PHP之：多图上传

    撰写日期:2016-6-30 15:17:35 Thursday 参考 http://a3147972.blog.51cto.com/2366547/1381136 (08-05ThinkPHP+sw ...

  9. 微信jssdk，实现多图上传的一点心得

    一.首先在common.js里封装一个函数,在需要调用jsSDK的页面引用此方法即可实现微信的信息配置function signatureJSSDK() { var url = window.loca ...

随机推荐

  1. IOS开发--待研究源码(持续添加更新)

    1.丰富的CAEmitterLayer制作的粒子效果,比如烟花效果 (还未研究) 该项目本人未研究,待以后有时间或者有需求再研究 github源码下载地址:https://github.com/lic ...

  2. Swift语言与Objective-C语言混合编程

    首先创建一个Swift的Single View工程 然后直接在工程中新建OC文件: 然后选择OC语言之后会问你是否自动创建OC和Swift的中间文件: 然后工程文件夹里就有了三个文件: 现在OC头文件 ...

  3. Swift面向对象基础（中）——Swift中的方法

    学习来自<极客学院> 1.定义方法需要在类型(枚举,结构体,类)里定义,不能独立定义,独立定义的是函数 2.方法要么属于该类型本身,要么是该类型的一个实例 3.不能独立执行方法,执行方法必 ...

  4. 基于AFNetWorking封装一个网络请求数据的类

    1.新建一个继承于NSObject类的类,在.h文件中 #import "AFHTTPRequestOperationManager.h" //定义两个block来接收请求成功和失 ...

  5. 邮件群发工具（C#版）

    引言 经常会参与组织一些社区活动,涉及到和不同的人进行交流,微信当然是必须的,同样邮件也是一种不可或缺的方式. 一般群发的邮件不是很友好,如果是一对一的,收到邮件的人是不是会比较重视,而且还有他的名字 ...

  6. Wing IDE 5 的破解

    Wing IDE 百度百科 1.安装好Python,已测的是Python 2.7.10: 2.新建一个py文件CalcActivationCode.py(名字自己随便取): 3.CalcActivat ...

  7. 内部类--毕向东Java基础教程学习笔记

    内部类的访问规则 1. 内部类可以直接访问外部类的成员,包括私有. 之所以可以直接访问外部类的成员,是因为内部类中持有外部类的引用,格式:外部类名.this 2.外部类要访问内部类,必须建立内部类对象 ...

  8. mysql基础操作学习笔记（2）----索引

    为什么要创建索引?     在此本人也带着相同的疑问,能够解释的仅仅是:为了减少数据库查询时所需要的速度.如果正常查询和索引查询所需时间相差很多倍时我们自然是需要索引的了. 想要知道结果,只能等我学得 ...

  9. Android程序入口以及项目文件夹的含义和使用总结—入门

    新接触一门程序或者开发框架,我一般都要先弄清楚程序的入口在哪里,程序怎么运行的:建立一个项目后,各个文件夹有什么作用以及如何使用等等.理清楚这些东西对以后开发是很有好处的,古话说得好,工欲善其事,必先 ...

  10. 算法（三）粒子群算法PSO的介绍

    一.引言 在讲算法之前,先看两个例子: 例子一:背包问题,一个书包,一堆物品,每个物品都有自己的价值和体积,装满书包,使得装的物品价值最大. 例子二:投资问题,n个项目,第i个项目投资为ci 收益为p ...