成功的上传文件少不了后台的配合,也需要前台的努力
1.判断文件类型
在实际开发过程中既可以在change或者blur的时候去判断,也可以点击触发上传前去判断文件的类型。
我们通过input.value可以获得文件的名称,截取最后一个点之后的字符串可以获取到文件后缀名
var fileName = input.value,
pointIndex,suffixName = ''; // pointIndex是最后一个点的位置,suffixName为后缀名变量
if(fileName != '' && fileName != undefined && fileName != null){ // 在不为空的情况下
pointIndex = fileName.lastIndexOf('.'); // 获取最后一个点的位置
if(pointIndex > -1 && pointIndex != fileName.length - 1){
suffixName = fileName.subString(pointIndex + 1);
// substring() 方法用于提取字符串中介于两个指定下标之间的字符,不接受负的参数
// 尽量不要用substr(), ECMAscript没有规范它
// slice()功能差不多,但slice可以接受负参数,而substring大小相反的参数会自动交换
}
} // 文件名为空或者文件名中没有点‘.’或者‘.’在最后一位
根据获取到的变量suffixName来判断是否符合相应的文件类型
2.用FormData模拟表单控件
语法:new FormData (form? : HTMLFormElement)
form是一个可选的HTML表单元素,可以包含任何形式的表单控件,包括文件输入框。
如果存在现成的form表单元素包含所需参数可以直接传form元素来初始化,也可以不传
FormData 知识点学习
拥有apend方法,语法为
void append(DOMString name, Blob value, optional DOMString filename);
void append(DOMString name, DOMString value);
FormData 的 append 方法学习
例子如下
<form id="newform">
<input type="text" id="age" value="18" name="age" />
<select id="gender" name="gender">
<option value="male">男</option>
<option value="female">女</option>
</select>
<input id="file" type="file" name="file" />
</form>
var formEl = document.getElementById('newform');
var formData1 = new FormData(formEl), // 如果是现成的form对象可以直接初始化
formData2 = new FormData(); // 也可以不传
var ageEl = document.getElementById("age"),
genderEl = document.getElementById("gender"),
fileEl = document.getElementById("file");
// 如果不使用现成的form对象初始化,而是按照我们实际需求传某些参数可以用到append方法
formData2.append("age",ageEl.value); // 实际上是给当前FormData对象添加一个键/值对
formData2.append("gender",genderEl.value); // 键是字符串、值也是字符串,如果不是会换成字符串,也可以是Bob对象
// 文件框的value是它的fileName+路径,而files则是所需上传的文件
var file = fileEl.files[0] // 可以获取到具体文件,多个文件可以通过files来判断
formData2.append("file",file,'file.text'); // 此时的file对象是Bob对象,是一个不可变、原始数据的类文件对象,第三个参数是文件名称,按实际需要可以不传,默认"blob"
// 实际上这一步文件转为二进制
当这些数据处理完成之后就差最后一步提交了
3. ajax提交FormData的数据
js原生的ajax写法
var xmlhttp; // 原生的ajax
if(window.XMLHttpRequest){ // code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
}else{ // code for IE5, IE6
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
function sysAjax(url,method,data,callback){
xmlhttp.onreadystatechange = function(){
if(xmlhttp.readyState == 4 && xmlhttp.status == 200){ // 请求成功返回结果
//callback(xmlhttp.responseText);
}
callback(xmlhttp.responseText); // xmlhttp.responseText是成功失败都返回的结果
};
xmlhttp.open(method,url,true);
// xhrReq.open(method, url, async, user, password); 后面仨可选
xmlhttp.send(data);
}
sysAjax('127.1.1.1:8080/getFile','POST',formData1,callback); // 用的时候就直接这样用了,写的不好请吐槽
Bob对象 知识点学习
XMLHttpRequst 知识点学习
我们在jquery的帮助下写的比较简单,因为它帮我们都封装处理好了
$.ajax({
type: 'post',
url: url,
data: formData2, // 上传的文件赋给data
cache: false, // 不需要缓存
processData: false, // 不需要处理数据
contentType: false, // 不设置内容类型
success: function (data) {},
error:function(err){}
});
ps:FormData有关的其它方法
var formdata = new FormData(); // 我们重新创建一个FormData对象
formdata.append("name","Joseph"); // 给formdata增加一个name/"Joseph"的键/值对
formdata.has("name"); // true, 判断formdata是否存在name键
formdata.append("name","Daisy"); // 可以同样的键继续增加值,此时的name键对应的值是数组['Joseph','Daisy']
formdata.get("name"); // 会读取到name键对应数组的第一个值, 'Joseph',是第一个值
formdata.getAll("name") // 获取到name键对应所有值的数组,['Joseph','Daisy']
formdata.set("name","JosephBlack"); // 此时name键的值被重置为["JosephBlack"]
// set方法不管有没有值,使用之后formdata会有set传的键/值对,以前的数据会被覆盖
// append方法会往formdata添加键/值对,以前没有的会添加,有的会在原键对应的值后面继续加值
FormData.delete("name"); // 会将name键对应的这个键值对,用has方法去判断就是false哦
// entries、keys、values方法返回的是方法对应的iterator,es6之后就可以用啦