jquery中的ajax基本使用以及文件上传

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)
                	}
                })
            }
		})