在完成上傳三維模型的功能的時候闪水,考慮到一般的三維模型都是多個文件組成的文件夾报破,所以就試了試紅寶書中提到的FormData方法任连。用了之后真心一點都不想寫表單蚤吹,當然也不用寫表單 哈哈哈。
- FormData是什么随抠?裁着,我是鏈接
1.1 當然,如果你不想跳轉一個新的頁面:
這是XMLHttpRequest Level 2添加的新接口拱她,利用FormData二驰,我們就可以用js制造表單,完全可以不用寫<form>;
1.2 不寫<form>秉沼,那我們要上傳的東西怎么寫桶雀?寫在哪里?
可以直接通過鍵值對的方式唬复,用FormData的append方法寫入FormData對象中矗积。
栗子: FormData對象.append( "key", value );
1.3 那我該怎么生成FormData對象?或者我應該用什么參數初始化它敞咧?
//生成一個FormData對象棘捣,可以不用任何參數。
var formData = new FormData();
1.4 我已經有了一個表單了休建,還可以用FormData么乍恐?
當然可以。
//用表單元素初始化FormData
var formData = new FormData(一個表單元素);
1.5 用了表單元素還能通過append添加其他的數據到FormData對象么测砂?
當然可以茵烈。而且這正是FormData的優(yōu)點哦。
- FormData的運用(突然發(fā)現 1已經把該講的講完了邑彪,強行寫個2)
//這是一個響應上傳文件夾的函數
function handleUpload() {
//初始化一個FormData對象
var formData = new FormData();
//獲取到<input>傳過來的文件
var files = upload.querySelector('#file').files;
var modelName = upload.querySelector('.model-name').value.trim();
if ( files.length === 0 ) {
alert("請先選擇文件夾");
return;
} else if ( !modelName ) {
alert("請輸入合法文件名");
return;
}
for (var i = files.length - 1; i >= 0; i--) {
formData.append( "file" + i, files[i] );
//循環(huán)添加文件到FormData對象中
}
formData.append('creat_edir', modelName );//添加任意鍵值對
formData.append('files_len', files.length );
var xhr = new XMLHttpRequest();
xhr.open( "post", "upload.php", true );
xhr.onreadystatechange = function() {
if ( xhr.readyState === 4 ) {
if ( Number(xhr.responseText) === 200 ) {
alert( "上傳成功" );
} else {
console.log( xhr.responseText )
}
}
}
xhr.send( formData );
}
3. 后臺怎么處理的瞧毙?[看這里](http://www.reibang.com/p/98a852d0392a)