1. 传统方式
<form id="upload-form" action="upload.php" method="post" enctype="multipart/form-data" >
<input type="file" id="upload" name="upload" /> <br />
<input type="submit" value="Upload" />
</form>
基本上传控件
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 = $('<iframe id="'+id+'" name="'+id+'" style="display:none;">');
var url = form.attr('action');
form.attr('target', id).append(iframe).attr('action', url + '?iframe=' + callback);
最后一行，它为表单添加target属性。指向动态插入的iframe。这样上传结束后服务器将结果返回iframe窗口。所以当前页面不会跳转。其次，在它的action属性指定的上传网址的后面添加一个参数，使得服务器知道回调函数的名称。这样就能将服务器返回的信息，从iframe窗口传到上层页面。
服务器返回的信息应该如下：
<script type="text/javascript">
window.top.window['callback'](data);
</script>
小笔记
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上传
// 检查是否支持FormData
if(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上传文件添加进度条
- 预先在
html中添加progress元素
<progress id="uploadprogress" min="0" max="100" value="0">0</progress>
- 定义
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. 拖拽上传
先在页面中放置一个容器，用来接收拖放的文件
<div id="holder"></div>
对它设置样式：
#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对象管理表单数据。
- 可以上传文件。
- 可以请求不同域名下的数据（跨域请求）。
- 可以获取服务器端的二进制数据。
- 可以获得数据传输的进度信息。
- 请求时限设置
xhr.timeout = 200;
设置事件
xhr.ontimeout = function(event){
alert('请求超时！');
}
- 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);
