带圆形进度条效果的ajax上传代码-html代码-BFW代码库

带圆形进度条效果的ajax上传代码

代码语言：html

所属分类：上传

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script id="bfwone" data="dep=jquery.17&err=0" type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        bready(function() {
            use(["radialIndicator", "radialindicator"], function() {



                //file upload example
                var container = $('#indicatorContainerWrap1'),
                msgHolder = container.find('.rad-cntnt'),
                containerProg = container.radialIndicator({
                    radius: 100,
                    percentage: true,
                    displayNumber: false
                }).data('radialIndicator');


                container.on({
                    'dragenter': function (e) {
                        msgHolder.html("Drop here");
                    },
                    'dragleave': function (e) {
                        msgHolder.html("Click / Drop file to select.");
                    },
                    'drop': function (e) {
                        e.preventDefault();
                        handleFileUpload(e.originalEvent.dataTransfer.files);
                    }
                });

                $('#prgFileSelector').on('change', function () {
                    handleFileUpload(this.files);
                });

                function handleFileUpload(files) {
                    msgHolder.hide();
                    containerProg.option('displayNumber', true);

                    var file = files[0],
                    fd = new FormData();

                    fd.append('file', file);


                    $.ajax({
                        url: 'service/upload.php',
                        type: 'POST',
                        data: fd,
                        processData: false,
                        contentType: false,
                        success: function () {
                            containerProg.option('displayNumber', false);
                            msgHolder.show().html('文件上传完成');
                        },
                        xhr: function () {
         .........完整代码请登录后点击上方下载按钮下载查看