jquery中的ajax
$.ajax({
url:'/',//请求访问的地址
type:'get/post/put/delet',//访问方式
data:{},//如果是提交数据就需要填写data
async:false/true,//true为异步,false为同步
beforeSend:function(){},//请求数据发送之前执行的方法
success:function(res){//请求成功之后,返回success成功之后的数据,会自动处理成json格式
console.log(res)
},
fail:function(error){//请求失败后,返回失败信息
console.log(error)
},
complete:function(){//不管请求成功还是失败都会执行
}
})
jquery中单个文件上传如何实现
<input type="file" id="file">
<button>提交文件</button>
$('button').on('click', function () {
var file= $('#file')[0].files;//原生的js上files属性存放着input选中的文件数据
if (file.lenght <= 0) return alert('请选择文件上传')//判断是否选择文件上传
var formdata = new FormData();//实例化一个formdata对象
//FormData 接口提供了一种表示表单数据的键值对 key/value 的构造方式
formdata.append('avatar', file[0]);//通过formdata上的append()方法来追加数据
$.ajax({
url: 'url地址',//请求访问的地址
type: 'post',//请求访问方式
data: formdata,//数据在这里
processData: false,//true会将传递的数据以字符串形式上传,false则不会转换,原样上传
contentType: false,//true默认会将发送数据的格式转换成字符串,false则会禁止默认行为
success: function (res) {
console.log(res)
}
})
})
上传多个文件
<input type="file" id="file" multiple="multiple">
<!--注意只有设置了multiple这个属性才能够一次选多个文件-->
<button>提交文件</button>
$('button').on('click', function () {
var file= $('#file')[0].files;//原生的js上files属性存放着input选中的文件数据
if (file.lenght <= 0) return alert('请选择文件上传')//判断是否选择文件上传
for (var i in file) {
var formdata = new FormData();//实例化一个formdata对象
formdata.append(file[i].name, file[i])//通过formdata上的append()方法来追加数据
$.ajax({
url: 'url地址',//请求访问的地址
type: 'post',//请求访问方式
data: formdata,//数据在这里
processData: false,//true会将传递的数据以字符串形式上传,false则不会转换,原样上传
contentType: false,//true默认会将发送数据的格式转换成字符串,false则会禁止默认行为
success: function (res) {
console.log(res)
}
})
}
})