jquery实现文件上传

菜的掉渣 2022-09-22 原文

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <script src="./lib/jquery.js"></script>
        
        <title></title>
    </head>
    <body>
        
        <input type="file" id="file1" />
        <img src="layui/css/modules/layer/default/loading-0.gif" class="loading" style="display: none;"/>
        <img src="layui/css/modules/layer/default/loading-1.gif" class="loading" style="display: none;"/>
        <img src="layui/css/modules/layer/default/loading-2.gif" class="loading" style="display: none;" />
        <img src="./loading.gif" class="loading" style="display: none;"/>
        <button id="sendFile">上传文件</button>
        <script>
        $(function(){
            // 为发送文件按钮绑定单价事件，，判断是否上传了文件
            $('#sendFile').on('click',function(){
                // 【0】表示转换为原生的dom对象，使用files属性访问文件列表
                var files = $('#file1')[0].files
                if(files.length <=0 ){
                    return alert('请选择文件后再上传！')
                }
                // console.log('ok')
                // 使用jQuery发起上传文件请求
                var fd = new FormData()
                fd.append('avatar',files[0])
                $.ajax({
                    type:'post',
                    url:'http://www.liulongbin.top:3006/api/upload/avatar',
                    data:fd,
                    processData:false,
                    contentType:false,
                    success:function(res){
                        console.log(res)
                    }
                })
            })
            //点击上传文件后加载图片显示
            $(document).ajaxStart(function(){
                $('.loading').show()
            })
            // 文件上传完成后加载图片消失
            $(document).ajaxStop(function(){
                $('.loading').hide()
            })
        })
        </script>
    </body>
</html>

//首先封装一个方法 返回一个绑定了监听函数的XMLHttpRequest对象
var xhrOnProgress=function(fun) {
    xhrOnProgress.onprogress = fun; //绑定监听
    //使用闭包实现监听绑
    return function() {
        //通过$.ajaxSettings.xhr();获得XMLHttpRequest对象
        var xhr = $.ajaxSettings.xhr();
        //判断监听函数是否为函数
        if (typeof xhrOnProgress.onprogress !== 'function')
            return xhr;
        //如果有监听函数并且xhr对象支持绑定时就把监听函数绑定上去
        if (xhrOnProgress.onprogress && xhr.upload) {
            xhr.upload.onprogress = xhrOnProgress.onprogress;
        }
        return xhr;
    }
}

var data = new FormData();    //创建一个新的表单对象
var file = $(".file_choose")[0].files[0];    //.file_choose应当为一个上传文件表单
data.append("data", file);    //将文件存放至表单对象，若有其他需要提交的数据，都可以使用此方法

$.ajax({
    method: 'POST',    //上传方式
    url: "upload_url",    //上传地址
    processData: false,    //让ajax不要序列化data
    contentType: false,    //让ajax不要操作content-type
    data: data,    //上传的数据
    //调用监听函数
    xhr:xhrOnProgress(function(evt){
        var percent = evt.loaded / evt.total * 100;//计算百分比
        if(percent < 99.9){
            percent = "已上传 " + percent.toFixed(2) + "%";
        }else{
            percent = "视频处理中，请稍后...";
        }
        $(".loading .layui-layer-content").text(percent);    //将进度显示在界面
    }),
    success: function (data) {
        $(".loading").hide();
        swal({    //此处使用sweetalert插件
            title: "上传成功",
            type: "success",
            showCancelButton: false,
            confirmButtonColor: "#18A689",
            confirmButtonText: "关闭",
            closeOnConfirm: false
        }, function () {
                window.location.href="/admin/alist";
        });
    },
    beforeSend: function() {    //发送ajax前，将进度界面显示出来
        $(".shade2").show();
        $(".loading").show();
    }
});