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文本
}
}
案例截图：
源代码：
<!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多图上传的更多相关文章
- ajax多图上传
百度云代码 参考:https://segmentfault.com/q/1010000004218827
- python django + js 使用ajax进行文件上传并获取上传进度案例
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- ajaxfileupload.js插件结合一般处理文件实现Ajax无刷新上传
先上几张图更直观展示一下要实现的功能.本功能主要通过Jquery ajaxfileupload.js插件结合ajaxUpFile.ashx一般应用程序处理文件实现Ajax无刷新上传功能,结合NPOI2 ...
- Bootstrap+PHP fileinput 实现多图上传 这是ajax上传，只能单张单张图片地上传
插件及源代码可以在这里下载 http://www.jq22.com/jquery-info5231下面是根据下载的demo进行补充:使用bootstrap界面美观,可预览,可拖拽上传,可配合ajax异 ...
- js formData图片上传（单图上传、多图上传）后台java
单图上传 <div class="imgUp"> <label>头像单图</label> <input type=&quo ...
- PHP 多图上传，图片批量上传插件，webuploader.js，百度文件上传插件
PHP 多图上传,图片批量上传插件,webuploader.js,百度文件上传插件(案例教程) WebUploader作用:http://fex.baidu.com/webuploader/gett ...
- thinkphp5多图上传 js部分
在项目中常会用到多图上上传,那就需要多图上传后需要预览,并且能删掉传错(不想传)的图,然而 测试了半天 并不知道jq怎么写,parent()parents()用了半天无果,罢了,还是用原生js来写.这 ...
- PHP之：多图上传
撰写日期:2016-6-30 15:17:35 Thursday 参考 http://a3147972.blog.51cto.com/2366547/1381136 (08-05ThinkPHP+sw ...
- 微信jssdk，实现多图上传的一点心得
一.首先在common.js里封装一个函数,在需要调用jsSDK的页面引用此方法即可实现微信的信息配置function signatureJSSDK() { var url = window.loca ...
随机推荐
- IOS之UIImageView--小实例项目--带音效的拳皇动画
内容大纲: 1.初步工作 2.开始敲代码 3.注意 4.可能遇到的错误 5.设置音频速率在代码顺序上的注意点 带音效的拳皇动画实例项目 初步工作 1.新建一Objective-C工程之后,将需要的拳皇 ...
- 让eclipse启动时拥有jre
让eclipse 拥有jre,这样才能启动 eclipse/eclipse.ini 首行加入 -vm /home/liujl/installer/jdk/bin/java
- 一步步学敏捷开发：5. Scrum的4种会议
在Scrum会议中包括:计划会议.每日站会.评审会议和回顾会议. 1.Sprint计划会(Sprint Planning) 在Scrum中,Sprint计划会议有两部分:1. 决定需要完成哪些工作?2 ...
- bat自动执行telnet
@del c:\temp.vbs @echo on error resume next >>c:\temp.vbs @echo dim WshShell>>c:\temp.vb ...
- OracleGateway11gR2访问异构数据库(MSSQL)配置文档（转）
1.前提条件 1. 准备工作 软件名称 操作系统 IP地址 端口 用户 密码 版本 状态 Oracle数据库 Windows localhost 1521 scott scott win32 Orac ...
- SQL Server 2008 R2——VC++ ADO 操作 多线程操作 代码结构
==================================声明================================== 本文原创,转载在正文中显要的注明作者和出处,并保证文章的完 ...
- Linux环境安装MQ
MQ下载地址:http://www-03.ibm.com/software/products/us/en/wmq/ 安装的MQ软件包为WMQv600Trial-x86_linux_2.tar.gz. ...
- 标准库shared_ptr智能指针的实现
目前测试功能正常.若有不完善的地方在改进吧.时候不早了睡觉去,哎,翘课会被抓,不冒险了.晚安全世界O(∩_∩)O /****************************************** ...
- 【温故而知新-Javascript】为DOM元素设置样式
1. 使用样式表 可以通过document.styleSheets属性访问文档中可用的CSS样式表,它会返回一组对象集合,这些对象代表了与文档管理的各个样式表. 每个样式表 都由一个CSSStyleS ...
- activiti自定义流程之整合（三）：整合自定义表单创建模型
本来在创建了表单之后应该是表单列表和预览功能,但是我看了看整合的代码,和之前没有用angularjs的基本没有什么变化,一些极小的变动也只是基于angularjs的语法,因此完全可以参考之前说些的表单 ...