Geek Answers Handbook

Bluequest jquery download plugin - progress bar

Starting with the minimal / basic blueimp plugin, I was able to work out the following multi-tasking bootloader . The script works fine: it correctly detects the dropzone, where the mouse drops the file, it correctly uploads the file to the server and correctly sends the correct ID to the server to identify the selected dropzone. At the end of the download, the script is downloaded from the server and displayed as a preview in the corresponding dropzone (it loads the preview for two reasons: because I did not understand how to use the plugin template (!) And because the script has time to display a progress bar )

And here is the problem. Everything is working on a progress bar .

I would like to:

  • displays a progress bar (inside the corresponding drop zone) as soon as the user uploads the file to dropzone
  • when the panel is complete, it should disappear

I cannot get this work indicator to work at all. As soon as I was able to see that the panel was working, but it worked only the first time the user dropped the image into dropzone. If I dropped a new image into the same drop zone, the panel no longer displayed.

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>jQuery File Upload Example</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="https://raw.github.com/blueimp/jQuery-File-Upload/master/js/vendor/jquery.ui.widget.js"></script>
    <script src="https://raw.github.com/blueimp/jQuery-File-Upload/master/js/jquery.fileupload.js"></script>

    <style>

        .bar { background: blue;}
        .progress { height: 18px; background: red;}
        .box {
            background: palegreen;
            width: 200px;
            height: 200px;
            line-height: 50px;
            text-align: center;
            font-weight: bold;
            margin: 40px;
        }
        .boxhover {
            background: lawngreen;
        }
    </style>
</head>
<body>
    <div id="id_1" class="box">
        <div class="progress"></div>
        <div class="image"></div>
    </div>
    <div id="id_2" class="box">
        <div class="progress"></div>
        <div class="image"></div>
    </div>
    <div id="id_3" class="box">
        <div class="progress"></div>    
        <div class="image"></div>
    </div>

    <script>
        $(function () {
            $('.box').each(function(){
                var $this = $(this);

                $this.fileupload({
                    dataType: 'json',
                    url: 'server/php/index.php',
                    dropZone: $this,
                    formData: {'id': $this.attr('id')},
                    dragover: function (e, data) {                          
                        $this.addClass( 'boxhover' );
                    },
                    always: function (e, data) {
                        $this.removeClass( 'boxhover' );
                    },
                    start: function (e, data) {
                        $('.progress', '#'+ $this.attr('id')).addClass( 'bar' );
                    },
                    progress: function (e, data) {
                        var progress = parseInt(data.loaded / data.total * 100, 10);
                        $('.progress .bar').css( 'width', progress + '%');
                    },
                    done: function (e, data) {
                        //$('<p/>').text($this.attr('id')).appendTo(document.body);
                        $('.progress', '#'+ $this.attr('id')).fadeOut("slow", function(){ 
                            $('.progress', '#'+ $this.attr('id')).removeClass( 'bar' );
                        });
                        $.each(data.files, function (index, file) {
                            //console.log(file, file.thumbnail_url);
                            //console.log('Added file: ' + file.name);
                            $('.image', '#'+ $this.attr('id')).html('<img src="server/php/files/thumbnail/' + file.name + '">');
                        });
                    }
                });
            });
            $('.box').on('dragleave', function(e){
                $(this).removeClass( 'boxhover' );
            });
        });
    </script>
</body> 
</html>

The PHP file is the blue found here .

+4
source share
1 answer

solvable.

. , , . :

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>jQuery File Upload Example</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="https://raw.github.com/blueimp/jQuery-File-Upload/master/js/vendor/jquery.ui.widget.js"></script>
    <script src="https://raw.github.com/blueimp/jQuery-File-Upload/master/js/jquery.fileupload.js"></script>

    <style>

        .bar { 
            position: absolute;
            height: 18px; 
            background: blue; 
            width: 0%;
            top: 50%;
        }
        .box {
            position: relative;
            background: palegreen;
            width: 200px;
            min-height: 200px;
            margin: 40px;
        }
        .boxhover {
            background: lawngreen;
        }
        .image { text-align: center; }
    </style>
</head>
<body>
    <div id="id_1" class="box">
        <div class="progress">
        </div>
        <div class="image"></div>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam mattis posuere sapien dictum rhoncus. Pellentesque aliquet posuere dui, vel tristique arcu auctor sit amet. Phasellus eget justo consequat, tincidunt arcu id, mattis felis. Duis interdum lectus consectetur nisi ullamcorper, id.</p>
    </div>
    <div id="id_2" class="box">
        <div class="progress">
        </div>
        <div class="image"></div>
    </div>
    <div id="id_3" class="box">
        <div class="progress">
        </div>  
        <div class="image"></div>
    </div>

    <script>
        $(function () {
            $('.box').each(function(){
                var $this = $(this);
                $this.fileupload({
                    dataType: 'json',
                    url: 'server/php/index.php',
                    dropZone: $this,
                    formData: {'id': $this.attr('id')},
                    dragover: function (e, data) {                          
                        $this.addClass( 'boxhover' );
                        $('#'+ $this.attr('id') + ' .progress').html('<div class="bar"></div>');
                    },
                    always: function (e, data) {
                        $this.removeClass( 'boxhover' );
                    },
                    progress: function (e, data) {
                        var progress = parseInt(data.loaded / data.total * 100, 10);
                        $('#'+ $this.attr('id') + ' .progress .bar').css( 'width', progress + '%');
                    },
                    done: function (e, data) {
                        $('#'+ $this.attr('id') + ' .progress .bar').fadeOut("slow");
                        $('#'+ $this.attr('id') + ' .progress').html('');
                        $.each(data.files, function (index, file) {
                            $('#'+ $this.attr('id') + ' .image').html('<img src="server/php/files/thumbnail/' + file.name + '">');
                        });
                    }
                });
            });
            $('.box').on('dragleave', function(e){
                $(this).removeClass( 'boxhover' );
            });
        });
    </script>
</body>

+7

More articles:


All Articles