用JQuery与FormData上传文件

主要介绍如何用JQuery与FormData如何上传一个或者多个文件。

1.首先利用input的type属性中的file选择上传文件，如果要上传多个文件在input属性中添加multiple属性，这个属性类似于checkbox可以对文件进行多选。

如下：

<input type="file" id="file" multiple></input>
<button id="btnSend">上传文件</button>

2.引入JQ文件后，给按钮设置点击事件，当我们点击的时候对文件进行上传。

        第一步：获取文件并将其转化为dom对象，获取files属性

$(function(){
    $('#btnSend').on('click',function(){
        
        //第一步：获取文件以及里面的files属性
        var myFile = $('#file')[0].files
    })
})

3.做一个判断是否选择了文件（总得有文件才能上传吧QAQ）

获取到的files对象里有一个属性length，代表了选择文件的个数。当length小于等于0时弹框提示。

$(function(){
    $('#btnSend').on('click',function(){
        
        //获取文件以及里面的files属性
        var myFile = $('#file')[0].files
        //判断是否选择了文件
        if(myFile.length<=0) return alert('请选择文件！')
    })
})

4.根据上传文件数量循环创建formdata对象。

$(function(){
    $('#btnSend').on('click',function(){
        
        //获取文件以及里面的files属性
        var myFile = $('#file')[0].files
        //判断是否选择了文件
        if(myFile.length<=0) return alert('请选择文件！')
        //循环创建formdata对象
        for(var i = 0;i<myFile.length;i++){
        //每循环一次创建一个
            var formData = new FormData()
        }
    })
})

5.用formData里的append方法，把文件信息添加到formData里面

$(function(){
    $('#btnSend').on('click',function(){
        
        //获取文件以及里面的files属性
        var myFile = $('#file')[0].files
        //判断是否选择了文件
        if(myFile.length<=0) return alert('请选择文件！')
        //循环创建formdata对象
        for(var i = 0;i<myFile.length;i++){
        //每循环一次创建一个
            var formData = new FormData()
        //用append方法把文件信息添加到formData里面
        formData.append('avatar',myFile[i])
        }
    })
})

这个avatar只是取个名字一般叫这个，头像的意思 同阿凡达QAQ

6.发送请求，为了后期使用方便我们可以把发送请求封装成一个方法。

//封装请求函数

function sendFile(formData){
$.ajax({
    // 请求路径
    url:'http://www.liulongbin.top:3006/api/upload/avatar',
    // 请求类型
    type:'post',
    // 上传的数据
    data:formData,
    // 默认为true，上传的数据以字符串形式上传，当上传文件时不需要转换为字符串，所以改为false
    processData:false,
    // 表示前端发送数据的格式
    // 默认是以字符串的形式 如 id=2019 & password=123456
    // 无法传递复杂数据，所以改为false
    contentType:false,
    // 请求成功时执行的函数
    success:function(res){
        // 对状态码进行判断
        if(res.status==200){
        // 我这里上传的是图片，所以做了一个图片预览，将图片展示到页面上
               // 创建图片标签
               var img = $('<img src = "" alt="" class"imgs">')
               // 根据返回的数据设置图片地址
                img.attr('src','http://www.liulongbin.top:3006'+res.url)
               // 将图片添加到body 展示到页面上
                $('body').append(img)
            }
        }
    })
}

       

调用请求方法：

$(function(){
    $('#btnSend').on('click',function(){
        
        //获取文件以及里面的files属性
        var myFile = $('#file')[0].files
        //判断是否选择了文件
        if(myFile.length<=0) return alert('请选择文件！')
        //循环创建formdata对象
        for(var i = 0;i<myFile.length;i++){
        //每循环一次创建一个
            var formData = new FormData()
        //用append方法把文件信息添加到formData里面
        formData.append('avatar',myFile[i])
        //调用请求函数
        sendFile(formData)
        }
    })
})

以上就完成了JQuery对文件的上传。

总体代码如下：

<script>
        $(function () {
            // 开始请求时显示加载图片
            $(document).ajaxStart(function () {
                $('#loading').show()
            })
            // 请求结束时隐藏图片
            $(document).ajaxStop(function () {
                $('#loading').hide()
            })
            $('#btnSend').on('click', function () {
                // 第一步：获取文件
                // 第二步：获取文件的files属性
                var myFile = $('#file')[0].files
                // 判断是否选择了文件
                if (myFile.length <= 0) return alert('请选择文件！')

                for (var i = 0; i < myFile.length; i++) {
                    // 第三步：实例化formData对象
                    // 循环创建formData对象
                    var formData = new FormData()
                    // 第四步：使用formData里的append方法，进行文件数据添加
                    // 把每一个图片信息加到formData里面
                    formData.append('avatar', myFile[i])
                    // 第五步：发送ajax请求
                    // 调用请求函数
                    sendFile(formData)
                }
            })


            // 封装请求函数
            function sendFile(formData) {
                $.ajax({
                    url: 'http://www.liulongbin.top:3006/api/upload/avatar',
                    type: 'post',
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function (res) {
                        if (res.status === 200) {
                            var img = $('<img src="" alt="" class="imgs">')
                            img.attr('src', 'http://www.liulongbin.top:3006' + res.url)
                            $('body').append(img)
                        }
                    }
                })
            }


        })
    </script>