从 blueimp 的 minimal/basic setup plugin 开始，我设法实现了以下 multi-dropzone uploader。该脚本工作正常:它正确地检测到鼠标放置文件的放置区，它正确地将文件上传到服务器，并正确地向服务器发送正确的 ID 以识别所选的放置区。在上传结束时，脚本从服务器加载缩略图，并将其显示为相应拖放区中的预览(它加载预览有两个原因:因为我不明白如何使用插件模板(!)和因为这样脚本就有时间显示进度条了)。
问题来了。除进度条外，一切正常。
我愿意:
- 在用户将文件拖放到 拖放区
- 当条形图完成时，它应该淡出
我根本无法让这个进度条工作。一旦我设法看到该栏正在工作，但它仅在用户第一次将图像放入拖放区时才起作用。如果我将新图像放入同一个拖放区，则该栏不会显示更多。
<!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 .
最佳答案
已解决。
我自己练的。我很确定这不是最优雅的方法，但它确实有效。这是完整的工作代码:
<!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>
关于php - blueimp jquery上传插件-进度条，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19292441/