【Ajax学习】jQuery高级用法

1 jQuery实现文件上传

1、定义UI结构

<input type="file" name="" id="file1">
    <button id="btnUpload">上传文件</button>

2、验证是否选择了文件

注意：获取文件列表前，必须要将jQuery对象转换为DOM对象，因为files是DOM对象的属性

jQuery对象转换为DOM对象的方法：$('名称')[0]

$(function(){
            $("#btnUpload").on('click', function(){
                var files = $('#file1')[0].files;
                if(files.length <= 0){
                    return alert('请选择文件！');
                }
            })
        })

3、向FormData中追加文件

 var fd = new FormData();
fd.append('avatar', files[0]);

4、使用jQuery发起上传文件的请求

注意：因为formdata自带setRequeseHeader，所以一定不要在ajax函数中再设置了，也就是说，在是同jQuery上传文件时，要固定写上contentType和processData为false。

而且 ，jQuery上传文件只能用ajax()函数，不能用get()或post()函数

$.ajax({
        type: 'post',
        url: 'http://www.liulongbin.top:3006/api/upload/avatar',
        data: fd,
        contentType: false,
        processData: false,
        success: function(res){
        $('#img').attr('src', 'http://www.liulongbin.top:3006' + res.url)
        }
})

2 jQuery实现loading效果

1.ajaxStart(callback)

Ajax请求开始时，执行ajaxStart 函数。可以在 ajaxStart的 callback 中显示loading效果，示例代码如下:

注意: $(document).ajaxStart()函数会监听当前文档内所有的Ajax请求。

2、ajaxStop(callback)

Ajax请求结束时，执行ajaxStop函数。可以在ajaxStop的callback 中隐藏 loading效果，示例代码如下:

$(function(){
            $(document).ajaxStart(function(){
                $("#loading").show();
            })
            $(document).ajaxStop(function(){
                $('#loading').hide();
            })
            $("#btnUpload").on('click', function(){
                var files = $('#file1')[0].files;
                if(files.length <= 0){
                    return alert('请选择文件！');
                }

                var fd = new FormData();
                fd.append('avatar', files[0]);

                $.ajax({
                    type: 'post',
                    url: 'http://www.liulongbin.top:3006/api/upload/avatar',
                    data: fd,
                    contentType: false,
                    processData: false,
                    success: function(res){
                        $('#img').attr('src', 'http://www.liulongbin.top:3006' + res.url)
                    }
                })
            })
        })