话不多说，先上demo
<%@ page language="java" contentType="text/html; charset=utf-8"pageEncoding="utf-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>demo</title>
<script type="text/javascript" src="/abc/js/jquery/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="/abc/js/plupload.full.min.js"></script>
</head>
<body>
<table align="center" cellspacing="0" border="1">
<tr>
<th>编号</th>
<th>上传</th>
</tr>
<c:forEach begin="1" end="5" varStatus="vs">
<tr>
<td>${vs.count}</td>
<td>
<div id='unique_id${vs.index }' class='gallery'>
<a href='' id='unique_id${vs.index }_uploader' ><span id="unique_id${vs.index }_span">上传</span></a>
<ul id='unique_id${vs.index }_list'>
</ul>
</div>
</td>
</tr>
</c:forEach>
</table>
</body>
<script type="text/javascript">
var uploaders = new Array();
initUploaders = function(uploaders) {
$(".gallery").each(function() {
var el = $(this);
var button = el.attr("id") + "_uploader";
var button1 = el.attr("id") + "_list";
console.log("Init uploader id:" + el.attr("id"));
var uploader = new plupload.Uploader({
runtimes: 'gears,html5,flash,silverlight,browserplus',
browse_button: button,
max_file_size: '10mb',
//修改处理文件的url
url: 'index.html',
// flash_swf_url: 'http://www.plupload.com/plupload/js/plupload.flash.swf',
// silverlight_xap_url: 'http://www.plupload.com/plupload/js/plupload.silverlight.xap',
filters: [
{
title: "Image files",
extensions: "jpg,gif,png"}
]
});
uploader.bind('FilesAdded', function(up, files) {
for(var i = 0, len = files.length; i<len; i++){
var file_name = files[i].name; //文件名
//构造html来更新UI
var html = '<li id="file-' + files[i].id +'"><p class="file-name">' + file_name + '</p><p class="progress"></p></li>';
$(html).appendTo('#'+button1);
}
//开始上传
uploader.start();
});
uploader.bind("FileUploaded",function(up, file, responseObject){
if(responseObject.status==200){
//上传成功后····
}
});
uploader.init();
});
};
initUploaders(uploaders);
</script>
</html>这里要注意的是：1.引用jquery-1.8.3.min.js和plupload.full.min.js两个文件，2.修改上传的url地址，3.在if(responseObject.status==200){//上传成功后····}处理成功后的操作，如果有需要的话。
jquery和plupload已经打包了，点击下面链接可以下载
版权声明：本文为beautiful_life12原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。