从 blueimp 的最小/基本设置插件开始,我设法制定了以下multi-dropzone uploader。该脚本工作正常:它正确地检测到鼠标放置文件的放置区,它正确地将文件上传到服务器,并正确地向服务器发送正确的 ID 以识别选择的放置区。在上传结束时,脚本从服务器加载缩略图,并将其显示为相应 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 在此处找到的文件。