1. 傳統(tǒng)方式
<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上傳
用戶點(diǎn)擊submit的時(shí)候，動(dòng)態(tài)插入一個(gè)iframe
var form = $("#upload-form");
form.on('submit',function() {
// 此處動(dòng)態(tài)插入iframe元素
});
動(dòng)態(tài)插入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屬性韩肝。指向動(dòng)態(tài)插入的iframe。這樣上傳結(jié)束后服務(wù)器將結(jié)果返回iframe窗口九榔。所以當(dāng)前頁面不會(huì)跳轉(zhuǎn)哀峻。其次，在它的action屬性指定的上傳網(wǎng)址的后面添加一個(gè)參數(shù)哲泊，使得服務(wù)器知道回調(diào)函數(shù)的名稱剩蟀。這樣就能將服務(wù)器返回的信息，從iframe窗口傳到上層頁面切威。
服務(wù)器返回的信息應(yīng)該如下：
<script type="text/javascript">
window.top.window['callback'](data);
</script>
小筆記
if (window.top!=window.self) //判斷是否是頂層窗口
然后在當(dāng)前網(wǎng)頁中定義回調(diào)函數(shù)
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事件的回調(diào)函數(shù)中。
form.on('submit',function() {
// 此處進(jìn)行ajax上傳
});
進(jìn)行ajax上傳
// 檢查是否支持FormData
if(window.FormData) {
var formData = new FormData();
// 建立一個(gè)upload表單項(xiàng)先朦，值為上傳的文件
formData.append('upload', document.getElementById('upload').files[0]);
var xhr = new XMLHttpRequest();
xhr.open('POST', $(this).attr('action'));
// 定義上傳完成后的回調(diào)函數(shù)
xhr.onload = function () {
if (xhr.status === 200) {
console.log('上傳成功');
} else {
console.log('出錯(cuò)了');
}
};
xhr.send(formData);
}
為ajax上傳文件添加進(jìn)度條
- 預(yù)先在
html中添加progress元素
<progress id="uploadprogress" min="0" max="100" value="0">0</progress>
- 定義
progress的回調(diào)函數(shù)
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. 圖片預(yù)覽
// 檢查是否支持FileReader對(duì)象
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. 拖拽上傳
先在頁面中放置一個(gè)容器，用來接收拖放的文件
<div id="holder"></div>
對(duì)它設(shè)置樣式：
#holder {
border: 10px dashed #ccc;
width: 300px;
min-height: 300px;
margin: 20px auto;
}
#holder.hover {
border: 10px dashed #0c0;
}
拖放文件的代碼喳魏，主要是定義dragover锋谐、dragend和drop這三個(gè)事件。
// 檢查瀏覽器是否支持拖放上傳截酷。
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]
#可以獲取臨時(shí)文件
file_io.tempfile
7. XMLHttpRequest新版本
**首先新建一個(gè)XMLHttpRequest對(duì)象
var xhr = new XMLHttpRequest();
然后想服務(wù)器發(fā)送一個(gè)HTTP請(qǐng)求
xhr.open('GET', 'example.com');
xhr.send();
接著等待服務(wù)器回應(yīng)，還需要監(jiān)控XMLHttpRequest對(duì)象狀態(tài)的變化
xhr.onreadystatechange = function() {
if(xhr.readyState == 4 && xhr.status == 200) {
alert(xhr.responseText);
}else{
alert(xhr.statusText);
}
}
XMLHttpRequest對(duì)象的主要屬性
- xhr.readyState：XMLHttpRequest對(duì)象的狀態(tài)迂苛，等于4表示數(shù)據(jù)已經(jīng)接收完畢就漾。
- xhr.status：服務(wù)器返回的狀態(tài)碼抑堡，等于200表示一切正常朗徊。
- xhr.responseText：服務(wù)器返回的文本數(shù)據(jù)
- xhr.responseXML：服務(wù)器返回的XML格式的數(shù)據(jù)
- xhr.statusText：服務(wù)器返回的狀態(tài)文本首妖。
新版本XMLHttpRequest的新功能
- 可以設(shè)置HTTP請(qǐng)求的時(shí)限。
- 可以使用FormData對(duì)象管理表單數(shù)據(jù)。
- 可以上傳文件。
- 可以請(qǐng)求不同域名下的數(shù)據(jù)（跨域請(qǐng)求）棚壁。
- 可以獲取服務(wù)器端的二進(jìn)制數(shù)據(jù)杯矩。
- 可以獲得數(shù)據(jù)傳輸?shù)倪M(jìn)度信息。
- 請(qǐng)求時(shí)限設(shè)置
xhr.timeout = 200;
設(shè)置事件
xhr.ontimeout = function(event){
alert('請(qǐng)求超時(shí)袖外！');
}
- formData對(duì)象
首先新建一個(gè)formData對(duì)象
var formData = new FormData();
為FormData對(duì)象添加表單項(xiàng)
formData.append('username','張三');
formData.append('id', '1234');
傳送FormData對(duì)象
xhr.send(formData);
FormData可以獲取變單項(xiàng)
var form = document.getElementById('myform');
var formData = new FormData(form);
formData.append('secret', '123456'); // 添加一個(gè)表單項(xiàng)
xhr.open('POST', form.action);
xhr.send(formData);
