<div style="text-align:center">
<span>
<button id="browse" class="btn btn-primary">选择文件</button>
<button id="start_upload" class="btn btn-primary">开始上传</button>
</span>
<table id="file-list" class="table">
</table>
</div>
<script>
var uploader = new plupload.Uploader({ //实例化一个plupload上传对象
browse_button: 'browse',
url: 'Upload.ashx',
filters: {
mime_types: [ //只允许上传图片和zip文件
{ title: "Image files", extensions: "jpg,gif,png" },
{ title: "Zip files", extensions: "zip" },
{ title: "MP3", extensions: "mp3" },
{ title: "VIDEO", extensions: "avi" }
],
max_file_size: '1024000mb', //最大只能上传100MB的文件
prevent_duplicates: true //不允许选取重复文件
},
multi_selection: true,
//chunk_size: "1024kb",
flash_swf_url: 'js/Moxie.swf',
silverlight_xap_url: 'js/Moxie.xap',
});
uploader.init(); //初始化
//绑定文件添加进队列事件
uploader.bind('FilesAdded', function (uploader, files) {
for (var i = 0, len = files.length; i < len; i++) {
var file_name = files[i].name; //文件名
//构造html来更新UI
var liStr = '<li id="file-' + files[i].id + '"><p class="file-name">'+ file_name + '</p><p class="progress"></p></li>';
var html = '<tr><td width="80%">' + liStr + '</td><td width="20%"><span id="num' + files[i].id + '" style="font-weight:700;font-size:32px"></span></td></tr>';
$(html).appendTo('#file-list');
}
});
//绑定文件上传进度事件
uploader.bind('UploadProgress', function (uploader, file) {
$('#file-' + file.id + ' .progress').css('width', file.percent + '%');//控制进度条
$("#num"+file.id).html(file.percent + "%");
});
//上传按钮
$('#start_upload').click(function () {
uploader.start(); //开始上传
});
</script>
参考文章:
前端上传组件Plupload使用指南
工具和Demo:
plupload-2.1.8.zip
Demo