ajax用FormData上传文件

成功的上传文件少不了后台的配合，也需要前台的努力

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之后就可以用啦

ajax用FormData上传文件

猜你喜欢