logo标签列表

蓝色提琴jquery上传插件-进度条

phpjquery
5
从blueimp的最小/基本设置插件开始，我成功地制作出了以下多拖放区上传器。脚本运行正常：它正确检测鼠标拖放文件的拖放区，将文件正确上传到服务器，并向服务器正确发送用于识别所选拖放区的ID。在上传结束时，脚本从服务器加载缩略图，并将其作为预览显示在相应的拖放区中（之所以要重新加载预览，有两个原因：一是因为我不知道如何使用插件模板（！），二是因为这样脚本有时间显示进度条）。
问题来了。除了进度条，其他都正常运行。
我想要：
  1. 在用户将文件拖放到拖放区后立即显示进度条（在相应的拖放区内）
  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在这里找到的（链接）。

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>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接