Php Blueimp jquery上传插件-进度条
从blueimp的minimal/basic安装插件开始，我成功地开发出了以下多dropzone上传程序。该脚本工作正常：它正确地检测鼠标放置文件的dropzone，它正确地将文件上载到服务器，并正确地向服务器发送正确的ID以标识所选的dropzone。在上传结束时，脚本从服务器加载缩略图，并在相应的dropzone中将其显示为预览（它加载回预览有两个原因：因为我不了解如何使用插件模板（！），并且因为这样脚本有时间显示进度条） 问题来了。在进度条中，一切都可以正常工作 我想：Php Blueimp jquery上传插件-进度条,php,jquery,Php,Jquery,从blueimp的minimal/basic安装插件开始，我成功地开发出了以下多dropzone上传程序。该脚本工作正常：它正确地检测鼠标放置文件的dropzone，它正确地将文件上载到服务器，并正确地向服务器发送正确的ID以标识所选的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>
jQuery文件上传示例
.bar{背景：蓝色；}
.progress{高度：18px；背景：红色；}
.盒子{
背景：淡绿色；
宽度：200px；
高度：200px；
线高：50px；
文本对齐：居中；
字体大小：粗体；
利润率：40像素；
}
boxhover先生{
背景：朗格林；
}
$（函数（）{
$（'.box'）。每个（函数（）{
var$this=$（this）；
$this.fileupload({
数据类型：“json”，
url:'server/php/index.php'，
dropZone:$this，
formData:{'id'：$this.attr（'id'）}，
dragover:函数（e，data）{
$this.addClass（'boxhover'）；
},
始终：功能（e、数据）{
$this.removeClass（'boxhover'）；
},
开始：功能（e，数据）{
$（'.progress'，'#'+$this.attr（'id'））.addClass（'bar'）；
},
进度：功能（e、数据）{
var progress=parseInt（data.loaded/data.total*100,10）；
$（'.progress.bar'）.css（'width'，progress+'%'）；
},
完成：功能（e，数据）{
//$（''）.text（$this.attr（'id'））.appendTo（document.body）；
$（'.progress'，'#'+$this.attr（'id'））.fadeOut（“slow”，function（）{
$（'.progress'，'#'+$this.attr（'id'））.removeClass（'bar'）；
});
$.each（data.files，函数（索引，文件）{
//log（文件、文件、缩略图和url）；
//console.log（'添加的文件：'+文件名）；
$（'.image'，'#'+$this.attr（'id'））.html（''；
});
}
});
});
$（'.box'）。on（'dragleave'，函数（e）{
$（this.removeClass（'boxhover'）；
});
});
PHP文件是blueimp找到的文件。已解决。 我自己锻炼。我很确定这不是最优雅的方式，但它确实有效。以下是完整的工作代码：
<!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>
jQuery文件上传示例
.bar{
位置：绝对位置；
高度：18px；
背景：蓝色；
宽度：0%；
最高：50%；
}
.盒子{
位置：相对位置；
背景：淡绿色；
宽度：200px；
最小高度：200px；
利润率：40像素；
}
boxhover先生{
背景：朗格林；
}
.image{文本对齐：居中；}
Lorem ipsum dolor sit amet，是一位杰出的献身者。这是智者的名言。佩伦茨克·阿利奎特·波苏尔·杜伊（aliquet posuere dui），一位名叫特里斯蒂克·阿尔库·奥克托（tristique arcu auctor）的人坐在阿梅特（amet）的椅子上。Phasellus eget justo Consequeat，tincidunt arcu id，mattis felis。我是乌拉姆科珀，身份证持有人
$（函数（）{
$（'.box'）。每个（函数（）{
var$this=$（this）；
$this.fileupload({
数据类型：“json”，
url:'server/php/index.php'，
dropZone:$this，
formData:{'id'：$this.attr（'id'）}，
dragover:函数（e，data）{
$this.addClass（'boxhover'）；
$（'#'+$this.attr（'id'）+'.progress'）.html（''）；
},
始终：功能（e、数据）{
$this.removeClass（'boxhover'）；
},
进度：功能（e、数据）{
var progress=parseInt（data.loaded/data.total*100,10）；
$（'#'+$this.attr（'id'）+'.progress.bar'）.css（'width'，progress+'%'）；
},
完成：功能（e，数据）{
$（'#'+$this.attr（'id'）+'.progress.bar'）.fadeOut（“慢”）；
$（'#'+$this.attr（'id'）+'.progress'）.html（''）；
$.each（data.files，函数（索引，文件）{