在完成上传三维模型的功能的时候,考虑到一般的三维模型都是多个文件组成的文件夹,所以就试了试红宝书中提到的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的优点哦。
- FormData的运用(突然发现 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] );
//循环添加文件到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. 后台怎么处理的?[看这里](//www.greatytc.com/p/98a852d0392a)