用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>

  • 4
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
可以使用以下步骤: 1. 创建一个HTML表单,其中包含一个文件选择器和一个“上传”按钮。 2. 使用jQuery在点击“上传”按钮时触发一个函数。 3. 在该函数中,获取选择的文件列表并将其存储在变量中。 4. 使用FormData对象来创建一个新的表单数据对象,并向其中添加每个文件。 5. 发送一个AJAX请求,将FormData对象发送到服务器端。 6. 一旦接收到服务器的响应,可以使用jQuery添加一个新的图片元素到页面上,以显示上传的图片。 以下是一个示例代码: ```html <!DOCTYPE html> <html> <head> <title>Upload Images with jQuery and FormData</title> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> </head> <body> <form id="imageUploadForm"> <input type="file" id="imageInput" name="imageInput" multiple> <input type="button" value="Upload" onclick="uploadImages()"> </form> <div id="imagePreview"></div> <script> function uploadImages() { var files = $('#imageInput')[0].files; var formData = new FormData(); for (var i = 0; i < files.length; i++) { formData.append('images[]', files[i]); } $.ajax({ url: 'uploadImages.php', type: 'POST', data: formData, processData: false, contentType: false, success: function(data) { for (var i = 0; i < files.length; i++) { var previewImg = $('<img>').attr('src', URL.createObjectURL(files[i])); $('#imagePreview').append(previewImg); } }, error: function() { alert('An error occurred while uploading the images.'); } }); } </script> </body> </html> ``` 在上面的示例代码中,我们创建了一个表单,其中包含一个文件选择器和一个“上传”按钮。当用户点击“上传”按钮时,将调用uploadImages()函数。该函数首先获取选择的文件列表,并使用FormData对象创建一个新的表单数据对象。然后,它使用AJAX发送FormData对象到服务器端。一旦接收到服务器的响应,就会使用jQuery添加一个新的图片元素到页面上,以显示上传的图片。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值