1. 传统方式

基本上传控件

2. iframe上传

用户点击submit的时候，动态插入一个iframe

var form = $("#upload-form");form.on('submit',function() {　　// 此处动态插入iframe元素});

动态插入iframe代码

var seed = Math.floor(Math.random() * 1000);var id = "uploader-frame-" + seed;var callback = "uploader-cb-" + seed;var iframe = $('

最后一行，它为表单添加target属性。指向动态插入的iframe。这样上传结束后服务器将结果返回iframe窗口。所以当前页面不会跳转。其次，在它的action属性指定的上传网址的后面添加一个参数，使得服务器知道回调函数的名称。这样就能将服务器返回的信息，从iframe窗口传到上层页面。

服务器返回的信息应该如下：

小笔记

if (window.top!=window.self)  //判断是否是顶层窗口

然后在当前网页中定义回调函数

window[callback] = function(data){　　console.log('received callback:', data);　　iframe.remove(); //removing iframe　　form.removeAttr('target');　　form.attr('action', url);　　window[callback] = undefined; //removing callback};

3. 初步使用FormData(ajax上传)

ajax上传文件，放在表单的submit事件的回调函数中。

form.on('submit',function() {　　// 此处进行ajax上传});

进行ajax上传

// 检查是否支持FormDataif(window.FormData) {　　　var formData = new FormData();　　// 建立一个upload表单项，值为上传的文件　　formData.append('upload', document.getElementById('upload').files[0]);　　var xhr = new XMLHttpRequest();　　xhr.open('POST', $(this).attr('action'));　　// 定义上传完成后的回调函数　　xhr.onload = function () {　　　　if (xhr.status === 200) {　　　　　　console.log('上传成功');　　　　} else {　　　　　　console.log('出错了');　　　　}　　};　　xhr.send(formData);}

为ajax上传文件添加进度条

1. 预先在html中添加progress元素

   0

2. 定义progress的回调函数

   xhr.upload.onprogress = function (event) {　　if (event.lengthComputable) {　　　　var complete = (event.loaded / event.total * 100 | 0);　　　　var progress = document.getElementById('uploadprogress');　　　　progress.value = progress.innerHTML = complete;　　}};

4. 图片预览

// 检查是否支持FileReader对象if (typeof FileReader != 'undefined') {　　var acceptedTypes = {　　　　'image/png': true,　　　　'image/jpeg': true,　　　　'image/gif': true　　};　　if (acceptedTypes[document.getElementById('upload').files[0].type] === true) {　　　　var reader = new FileReader();　　　　reader.onload = function (event) {　　　　　　var image = new Image();　　　　　　image.src = event.target.result;　　　　　　image.width = 100;　　　　　　document.body.appendChild(image);　　　　};　　　　reader.readAsDataURL(document.getElementById('upload').files[0]);　　}}

5. 拖拽上传

先在页面中放置一个容器，用来接收拖放的文件

对它设置样式：

#holder {　　border: 10px dashed #ccc;　　width: 300px;　　min-height: 300px;　　margin: 20px auto;}#holder.hover {　　border: 10px dashed #0c0;}

拖放文件的代码，主要是定义dragover、dragend和drop这三个事件。

// 检查浏览器是否支持拖放上传。if('draggable' in document.createElement('span')){　　var holder = document.getElementById('holder');　　holder.ondragover = function () { this.className = 'hover'; return false; };　　holder.ondragend = function () { this.className = ''; return false; };　　holder.ondrop = function (event) {　　　　event.preventDefault();　　　　this.className = '';　　　　var files = event.dataTransfer.files;　　　　// do something with files　　};}

6. 在rails中获取上传

file_io = params[:upload]#可以获取临时文件file_io.tempfile

7. XMLHttpRequest新版本

**首先新建一个XMLHttpRequest对象

var xhr = new XMLHttpRequest();

然后想服务器发送一个HTTP请求

xhr.open('GET', 'example.com');xhr.send();

接着等待服务器回应，还需要监控XMLHttpRequest对象状态的变化

xhr.onreadystatechange = function() {  if(xhr.readyState == 4 && xhr.status == 200) {    alert(xhr.responseText);  }else{    alert(xhr.statusText);  }}

XMLHttpRequest对象的主要属性

• xhr.readyState：XMLHttpRequest对象的状态，等于4表示数据已经接收完毕。
• xhr.status：服务器返回的状态码，等于200表示一切正常。
• xhr.responseText：服务器返回的文本数据
• xhr.responseXML：服务器返回的XML格式的数据
• xhr.statusText：服务器返回的状态文本。

新版本XMLHttpRequest的新功能

• 可以设置HTTP请求的时限。
• 可以使用FormData对象管理表单数据。
• 可以上传文件。
• 可以请求不同域名下的数据（跨域请求）。
• 可以获取服务器端的二进制数据。
• 可以获得数据传输的进度信息。

1. 请求时限设置

   xhr.timeout = 200;

   设置事件

   xhr.ontimeout = function(event){　　alert('请求超时！');}

2. formData对象
   首先新建一个formData对象

   var formData = new FormData();

   为FormData对象添加表单项

   formData.append('username','张三');formData.append('id', '1234');

   传送FormData对象

   xhr.send(formData);

   FormData可以获取变单项

   var form = document.getElementById('myform');var formData = new FormData(form);formData.append('secret', '123456'); // 添加一个表单项xhr.open('POST', form.action);xhr.send(formData);