在文件上传中,一般都会用到一个formData对象,
通过formData对象可以组装一组用XMLHttpRequest发送请求的键值对。这个效果和 form表单提交时,将编码类型设置为multipart/form-data的方式一样,会直接取name为键值对名,value为值,传送给服务器。
$('input).change(function(e){
var formData = new FormData();
formData.append('name','GT');
formData.append('fileName',this.files[0])//取文件的时候 注意是 this $(this)
fileUpload(formData,this)
})
//利用ajax上传
function fileUpload(data,obj){
$.ajax({
type:'post',
url:basePath+'/fileUpload',
data:data,
async : false,
cache : false,//上传文件无需缓存
contentType : false,//传输的数据类型,必须为这个 或者是mutipart/form-data 当表单已经设置好 这里必须为false
processData : false,//用于对data参数进行序列化处理 这里必须false
success:function(data){
myimg=data.result;//线上图片地址 这个地址 后台要做映射
$(obj).parents('tr').addClass('on').find('.img_').html(data.result)
$('.mask').show();
}
,error:function (data) {
alert('服务器走丢了')
}
})
}
formData是通过append('名',‘值’)来进行添加的
另一种上传的方式
var xhr = new XMLHttpRequest();
xhr.open("POST", "stash.php", true);
xhr.onload = function(oEvent) {
if (oReq.status == 200) {
//上传成功
} else {
//上传失败
}
};
oReq.send(formData);
也可以直接用表单
<form action="/url.do" enctype="multipart/form-data" method="post">
<input type="file" name="name"/>
<input type="hidden" name="pwd"/> //额外参数 可以不显示出来
<input type="hidden" name="mytype"/>
<input type="submit" value="提交">
</form>
最近一些框架也有自己的方式,eg layui上传文件
upload.render({
elem: '#id'
,url: '/api/upload/'
,before: function(obj){ //obj参数包含的信息,跟 choose回调完全一致,可参见上文。
layer.load(); //上传loading
}
,done: function(res, index, upload){
layer.closeAll('loading'); //关闭loading
}
,error: function(index, upload){
layer.closeAll('loading'); //关闭loading
}
});
(但是注意的是 这里的xhr 是取不到的 所以不能利用 xhr.setRequestHeader("appId", "xxx")附带请求头参数 ) 跨域的话只能服务端进行Access-Control-Allow-Origin 这里有完整文档介绍
这里主要说一下 添加参数的问题
写一个添加额外参数的函数:
function addData(input,data){ var item=[]; $.each(data,function(k,v){ item.push('<input type="hidden" name="'+k+'" value="'+v+'">'); }) $(input).after(item.join('')); }
然后在上传的 before中调用 这样就可以在文件上传时候 添加额外字段了
before:function (input) {
var data={
"appId":"xxxx",
"name":"GT"
}
addData(input,data)
}
input 的三个属性accept、capture、multiple
1. accept 可接受的文件类型 accept 属性只能与 <input type="file"> 配合使用。它规定能够通过文件上传进行提交的文件类型。
属性值:*代表所有 audio的类型 还可以加具体类型(image/gif, image/jpeg,....)
audio/*
video/*
image/*
有个博客 总结了 关于 accrpt的类型 对谷歌和ff有效的一些特殊写法 戳这里
2、capture属性
捕获到系统默认的设备,camera–照相机,camcorder–摄像机,microphone–录音 (我试验了一下 无法掉起 移动端的相机 但可以吊起 pc端的摄像头)
3.multiple属性 如果使用该属性,则允许一个以上的值 是html5的新属性
multiple="multiple" 则字段可接受多个值