5

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

问题来了。除了进度条，一切正常。

我想：

  1. 用户将文件放入 dropzone 后立即显示进度条（在相应的 dropzone 内）
  2. 当栏完成时，它应该淡出

我根本无法使这个进度条工作。一旦我设法看到该栏正在工作，但它仅在用户第一次将图像放入拖放区时才起作用。如果我将新图像拖放到同一个拖放区域中，则该栏不会显示更多。

<!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 在此处找到的文件。

4

1 回答 1

7

解决了。

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

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

于 2013-10-11T09:24:30.790 回答