Question

从blueimp的minimal / basic设置插件开始，我设法制定了以下 multi-dropzone uploader 。该脚本运行正常：它正确检测鼠标放下文件的dropzone，它正确地将文件上传到服务器，并正确地向服务器发送正确的ID以识别所选的dropzone。在上传结束时，脚本从服务器加载缩略图，并在相应的dropzone中将其显示为预览（它加载预览有两个原因：因为我不明白如何使用插件模板（！）和因为这样脚本有时间显示进度条。）

这就是问题所在。一切都与进度条分开。

我想：

一旦用户将文件放入，就会显示进度条（在相应的dropzone内） dropzone
当栏完成后，它应该淡出

我根本无法使这个进度条工作。一旦我设法看到酒吧工作，但它只在用户第一次将图像放入dropzone时工作。如果我将新图像放入同一个放置区域，则不会显示更多的条形图。

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

PHP文件是blueimp的here找到的文件。

Answer 1

<强>解决。

我自己做了。我很确定这不是最优雅的方式，但它有效。这是完整的工作代码：

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

Blueimp jquery上传插件 - 进度条

1 个答案: