plupload--重写插件自带的grid

[b]client端，自定义table布局[/b]

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>

<div id="container" style="margin-bottom:10px;height:30px;">
    <button id="pickfiles" class="btn btn-primary pull-left">Select files</button>
    <button id="uploadfiles" class="btn btn-primary pull-left" style="margin-left:20px;">Upload files</button>
</div>

<table class="table table-striped table-bordered  table-hover">
	<thead>
		<tr><th>File Name<th>Size</th><th>Status</th><th>Operation</th><tr>
	</thead>
	<tbody id="attachmentData">
		<c:if test="${not empty attachmentList}">
			<c:forEach var="attachment" varStatus="vs" items="${attachmentList}">
				<tr id="item${vs.count}">
					<td class="text-center">
						<c:out value="${attachment.fileName}"></c:out>
					</td>
					<td class="text-center">
						Not Available
					</td>
					<td class="text-center">
						100%
					</td>
					<td class="text-center">
						<a id="${attachment.id}" class="btn btn-danger btn-mini" href='javascript:void(0)' name="${attachment.id}" onclick="deleteById('${attachment.id}')" >
							Delete
						</a>
					</td>
				</tr>
			</c:forEach>
		</c:if>
	</tbody>
</table>
<pre id="console" style="display:none;"></pre>

<script type="text/javascript" src="${path}/resources/js/jquery-ui.min.js"></script>
<script type="text/javascript" src="${path}/resources/js/plupload/plupload.full.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	var uploader = new plupload.Uploader({
	    runtimes : 'html5,flash,silverlight,html4',	     
	    browse_button : 'pickfiles', // you can pass in id...
	    container: document.getElementById('container'), // ... or DOM Element itself	     
	    url : "${path}/mvc/employee/additionalFiles/upload?employeeId="+$("#employeeId").val(),	     
	    filters : {
	        max_file_size : '10mb',
	        mime_types: [
	            {title : "Image files", extensions : "jpg,gif,png"},
	            {title : "Zip files", extensions : "zip,rar"},
	            {title : "Word files", extensions : "doc,docx"},
	            {title : "PPT files", extensions : "ppt,pps"},
	            {title : "Excel files", extensions : "xlsx"},
	            {title : "Other files", extensions : "pdf"}
	        ]
	    },

	    // Flash settings
	    flash_swf_url : '${path}/resources/js/plupload/Moxie.swf',	 
	    // Silverlight settings
	    silverlight_xap_url : '${path}/resources/js/plupload/Moxie.xap',	     	 
	    init: {
	        PostInit: function(up) {
	            document.getElementById('uploadfiles').onclick = function() {
	                uploader.start();
	                return false;
	            };
	        },

	        FilesAdded: function(up, files) {
	            plupload.each(files, function(file) {
		            var html = "<tr id='"+file.id+"'>"+
									"<td class='text-center'>"+file.name+"</td>"+
									"<td class='text-center'>"+plupload.formatSize(file.size)+"</td>"+									"<td class='text-center' name='status'>0%</td>"+
									"<td class='text-center'>"+
										"<a class='btn btn-danger btn-mini' href='javascript:void(0)' name='remove'>Delete</a>"+
									"</td>"+
							   "</tr>";
	                $("#attachmentData").append(html);
	            });

	            $("a[name='remove']").each(function(){
					$(this).click(function(){
						up.removeFile(up.getFile($(this).parent().parent().attr("id")));
		            	$(this).parent().parent().remove();
					});
			    });
	        },

	        UploadProgress: function(up, file) {
	        	$("#"+file.id).children("td[name='status']").html('<span>' + file.percent + "%</span>");
	        },

	        FileUploaded: function(up, file, response) {
                var attachmentList = $.parseJSON(response.response).attachmentList;
                if(null != attachmentList){
                	var attachment = attachmentList[0];
                	var html = "<a id='"+attachment.id+"' class='btn btn-danger btn-mini' href='javascript:void(0)' name='"+attachment.id+"' onclick='deleteByIdAfterUploaded($(this))' >Delete</a>";
					$("#"+file.id+" td:last-child").html(html);
                }
            },

	        Error: function(up, err) {
	            $('#console').append("<span><b style='color:#ee5f5b;'>Error</b> # <b>" + err.file.name + "</b> : " + err.message+"</span>\n");
	            $('#console').fadeIn();
	        }
	    }
	});

	uploader.init();
});

function deleteById(attachmentId){
	$.post("${path}/mvc/employee/additionalFiles/delete/"+attachmentId,function(result){
		if(!result.result){
			common.showMessage(result.message);
		}else{
			$("#"+attachmentId).parent().parent("tr").remove();
			common.showMessage("delete success!");
		}
	});
}

function deleteByIdAfterUploaded(element){
	var attachmentId = $(element).attr("name");
	deleteById(attachmentId);
}
</script>

[b]server端[/b]

@RequestMapping(value = "/additionalFiles/upload", produces = "application/json;charset=UTF-8")
	public void uploadAdditionalFiles(@RequestParam("employeeId") Long employeeId,HttpServletRequest request,HttpServletResponse response) {
		List<AppCommAttachment> attachmentList = new ArrayList<AppCommAttachment>();

		MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;

		MultiValueMap<String, MultipartFile> map = multipartRequest.getMultiFileMap();
		if (map != null) {
			Iterator<String> iter = map.keySet().iterator();
			while (iter.hasNext()) { 
				String str = iter.next();
				List<MultipartFile> fileList = map.get(str);
				for (MultipartFile mpf : fileList) {
					AppCommAttachment attachment = attachmentService.uploadAttachmentUnderEmployee(employeeId, mpf, Boolean.FALSE);
					attachmentList.add(attachment);
				}
			}
		}

		try {
			JSONObject jsonObject = new JSONObject();
			jsonObject.put("attachmentList", attachmentList);
			response.getWriter().println(jsonObject.toString());
		} catch (IOException e) {

		}
	}

[b]note that[/b]：如果想使用插件自带的table布局，需要引入jquery ui css，并且保证ui的主题一致。