ajax上传多个文件并显示进度条

最新推荐文章于 2018-09-19 22:46:36 发布

小灰灰灰灰狼

最新推荐文章于 2018-09-19 22:46:36 发布

阅读量2.4k

点赞数

分类专栏： Js php相关 easyui

本文链接：https://blog.csdn.net/qq_34374450/article/details/81980744

版权

php相关同时被 3 个专栏收录

5 篇文章 0 订阅

订阅专栏

3 篇文章 0 订阅

订阅专栏

easyui

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>  </title>
    <link href="css/StyleCss.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" type="text/css" href="jeasyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="jeasyui/themes/icon.css">
    <script type="text/javascript" src="jeasyui/jquery.min.js"></script>
    <script type="text/javascript" src="jeasyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="jeasyui/locale/easyui-lang-zh_CN.js"></script>
    <style>
        .processBar{
            display: inline-block;
            width: 0;
            height: 7px;
            /*position: absolute;*/
            /*left: 500px;*/
            /*top: 14px;*/
            margin-bottom: -4px;
            margin-left: 135px;
            background: #009393;
        }
        .processNum {
            position: absolute;
            left: 620px;
            color: #009393;
            font-size: 12px;
            line-height: 35px;
        }
    </style>
    <script language="javascript">
        $(document).ready(function(){
            //上传准备信息
            $("#file").change(function(){
                var file = document.getElementById('file');
                var fileNum = file.files.length;
                $('.processBar').css("width",0);
                //验证要上传的文件
                $('#choose_button').linkbutton({text:fileNum+'个文件'});
                })
            });
        //选择上传视频
        function choose_videos(){
            $('#file').click();
        }
        //上传视频
        function upload_videos(){
            var formData = new FormData($('#uploadForm')[0]);
            var username=$('#username').val();
            var file = document.getElementById('file');
            var fileNum = file.files.length;
            if(!username){
                alert('未输入用户名');
                return false;
            }
            if(fileNum==0){
                alert('未选择文件');
                return false;
            }
            formData.append("username",username);
            console.log(formData);
            $.ajax({
                type: 'post',
                url: "agentVideoManageUpload.php",
                data: formData,
                cache: false,
                processData: false,
                contentType: false,
                xhr:function(){//获取上传进度
                    myXhr = $.ajaxSettings.xhr();
                    if(myXhr.upload){
                        myXhr.upload.addEventListener('progress',function(e){//监听progress事件
                            var loaded = e.loaded;//已上传
                            var total = e.total;//总大小
                            var percent = Math.floor(100*loaded/total);//百分比
                            $('.processNum').text(percent+"%");//数显进度
                            $('.processBar').css("width",percent+"px");//图显进度}, false);
                        });
                        return myXhr;
                    }
                },
                success: function(data){//上传成功回调
                    alert(data);
                    location.reload();
                }


            })
        }
        //清除form
        function clearForm(){
            $('#uploadForm').form('clear');
        }

    </script>

</head>
<body>


                <div id="p" class="easyui-panel" title="本地视频上传" style="width: 100%;height:655px;padding:10px;">
                    <form id="uploadForm" enctype="multipart/form-data">
                    <div cellpadding="5" style="margin:auto;width:60%;">
                        <div style="margin-bottom:20px">
                            <div>用户名:</div>
                            <br/>
                            <input class="easyui-textbox" data-options="prompt:'用户名'" id="username" style="width:100%;height:32px">
                        </div>

                        <div style="margin-bottom:20px">
                                <div style="display: none;">
                                    文件:<input id="file"  type="file" name="file[]" multiple="multiple"/>
                                </div>
                            <a href="#" class="easyui-linkbutton" id="choose_button" style="width: 150px;" onclick="choose_videos()">选择视频</a>
                            <span class="processBar"></span>
                            <span class="processNum">未选择文件</span>
                        </div>

                        <div style="margin-bottom:20px">

                            <a href="#" class="easyui-linkbutton" onclick="upload_videos()" style="width:120px;">提交</a>
                            <a href="#" class="easyui-linkbutton" onclick="clearForm()" style="width:120px;">取消</a>
                        </div>
                    </div>
                    </form>
                </div>


            </div>
  
</body>
</html>