4
從blueimp的最小/基本設置的插件開始，我設法制定出以下多懸浮窗上傳。該腳本正常工作：它正確地檢測到鼠標放置文件的dropzone，它將文件正確地上傳到服務器，並正確地向服務器發送正確的ID以識別所選的dropzone。在上傳的一端從縮略圖並將其顯示爲在相應的懸浮窗預覽服務器腳本加載（它加載回預覽有兩個原因：因爲我不知道如何使用插件模板（）和！因爲這樣腳本有時間顯示進度條）。Blueimp的jQuery插件上傳 - 進度條
問題出在這裏。一切工作分開進度條。
我想：
- 顯示進度條（相應的懸浮窗內）一個一旦用戶刪除該文件到 懸浮窗
- 當杆已完成，應該淡出
我不能讓這個進度條在所有的工作。一旦我設法看到了工作條，但它只在用戶第一次將圖像放入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。