如何让每一个图片对应一个进度条呢

星辰望月 发布于 2014/05/15 13:28
阅读 1K+
收藏 0
求大神看看我这个列子 怎么才能一个图片对应一个进度条 点击按钮以后只当前对应的进度条计算进度
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>jQuery File Upload Example</title>
<style type="text/css">
.bar {
height: 18px;
background: green;
}
</style>
</head>
<body>
<input id="fileupload" type="file" name="files[]"
data-url="/imageUpload/upload" multiple>
<div id="files" class="files"></div>


<script src="js/jquery.min.js"></script>
<script src="js/vendor/jquery.ui.widget.js"></script>
<script src="js/jquery.iframe-transport.js"></script>
<script src="js/jquery.fileupload.js"></script>
<script>
$(function() {
uploadButton = $('<button/>').text('upload').on('click',
function() {
var $this = $(this), data = $this.data();
$this.off('click').on('click', function() {
$this.remove();
data.abort();
});
data.submit().always(function() {
$this.remove();
});
});


$('#fileupload').fileupload({
//dataType: 'json',
acceptFileTypes : /(\.|\/)(gif|jpe?g|png)$/i,
maxNumberOfFiles : 1,
autoUpload : false
}).on('fileuploadadd',function(e, data) {
data.context = $('<div/>').appendTo('#files');
$.each(data.files, function(index, file) {
var node = $('<p/>').append(
$('<span/>').text(file.name));
if (!index) {
node.append('<br>').append(
uploadButton.clone(true).data(data));
node.append('<br>').append('<div class="bar" style="width: 0%;"></div>');
}
node.appendTo(data.context);
});
}).on('fileuploadprogressall', function(e, data) {
var progress = parseInt(data.loaded / data.total * 100, 10);
$('#progress .bar').css('width', progress + '%');
});
});
</script>


</body>
</html>
加载中
0
java_speed
java_speed
java_speed
呵呵
星辰望月
星辰望月
这个是个新组件了 我想用jquery file upload 来实现
0
getchoco
getchoco

用data.context获取到那个图片对应的progress bar

比如我是这样

data.context.find('label').eq(0).html("图片上传中:" + progress + "%");

cherishJ
cherishJ
我也遇到这个问题,lz能告诉我怎么解决的么?求。。
星辰望月
星辰望月
谢谢这个问题我已经解决了
返回顶部
顶部