笔记整理-swfupload使用实例

<!-- 基本JQuery，版本建议1.10以后 -->
<script src="js/jquery.js"></script>
<!-- 文件上传插件 -->
<link href="<%=basePath%>js/swfupload/css/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="<%=basePath%>js/swfupload/swfupload.js"></script>
<script type="text/javascript" src="<%=basePath%>js/swfupload/swfupload.queue.js"></script>
<script type="text/javascript" src="<%=basePath%>js/swfupload/fileprogress.js"></script>
<script type="text/javascript" src="<%=basePath%>js/swfupload/handlers.js"></script>

<script type="text/javascript">
var swfu;
var accTotalCount = 0;

$(function () {
	var settings = {  
		flash_url : "js/swfupload/swfupload.swf",
		upload_url:  "<%=basePath%>docbase/AttachmentsSwfupload_submitAttachment.do?jsessionid:<%=request.getSession().getId()%>&r="+Math.random(),
		post_params: {},
		file_post_name: "file",
		file_size_limit: "100 MB",
		file_types :  可以上传的问文件的的后缀,
//*.doc;*.docx;*.ppt;*.pptx;*.xls;*.xlsx;*.pdf;*.ceb;*.sep;*.gd;*.txt;*.zip;*.rar;*.jpg;*.gif;*.bmp;*.png，*.jpg;*.gif
		file_types_description : "常见文件类型",
		file_upload_limit : 10,  //配置上传个数
		file_queue_limit : 0,
		custom_settings : {
			progressTarget : "fsUploadProgress",
			cancelButtonId : "btnCancel"
		},
		debug: false,
		// Button settings
		button_image_url: "js/swfupload/images/blueBtn.png",
		button_width: 100,
		button_height: 30,
		button_placeholder_id: "spanButtonPlaceHolder",
		button_text: '<span class="theFont">   选择</span>',
		button_text_style: ".theFont { font-size:14; color:#ffffff; float:left;}",
		button_text_left_padding: 20,
		button_text_top_padding: 3,
		button_cursor: SWFUpload.CURSOR.HAND,
		button_window_mode: SWFUpload.WINDOW_MODE.TRANSPARENT,
		file_queued_handler : fileQueued,
		file_queue_error_handler : fileQueueError,
		file_dialog_complete_handler : fileDialogComplete,
		upload_start_handler : uploadStart,
		upload_progress_handler : uploadProgress,
		upload_error_handler : uploadError,
		upload_success_handler : myUploadSuccess,
		upload_complete_handler : uploadComplete,
		queue_complete_handler : myQueueComplete
	}; 
	swfu = new SWFUpload(settings);
});

function myUploadSuccess(fileObject, serverData) {
	try {
		var progress = new FileProgress(fileObject, this.customSettings.progressTarget);
		progress.setComplete();
		progress.setStatus("上传成功");
		progress.toggleCancel(false);
	} catch (ex) {
		this.debug(ex);
	}
	var arr = serverData.split(",");
	var fjId = arr[0];
	var className = "";
	var fjName = arr[1];
	var rowHtml = 
		'<tr id="acc_tr_' + fjId + '" style="height:60px;" >' +
		'<td width="10px">' +
		'<input name="acc" type="checkbox" value="' + fjId + '" />' +
		'</td>' +
		'<td align="left" >' +
		'<a href="javascript:void(0)" onclick="doEdit(' + fjId + ');">'  + fjName +
		'</a>' +								
		'</td>' +									
		'</tr>';
	$("#Tab").append(rowHtml);
	$("#acc_tr_0").remove();
}

function myQueueComplete(numFilesUploaded) {
	accTotalCount = calcAccCount();
	$("#divStatus").html('共上传' + accTotalCount + '个文件，本次上传' + numFilesUploaded + '个文件。');
}

/**
* 计算附件总数
*/
function calcAccCount() {
	accTotalCount = $("input[name='acc']").length;
	return accTotalCount;
}

function deleteFiles() {
	var fjIdArr = [];
	$("input[name='acc']:checked").each(function() {
		fjIdArr.push(this.value);
	});
	if (fjIdArr.length < 1) {
		alert("请选择要删除的附件！");
		return;
	}
	if (confirm("你确定要删除所选文件吗？")) {
		var url = "<%=basePath%>docbase/AttachmentsSwfupload_deleteAttachment.do?fjIdArr="+fjIdArr;
		$.ajax({
			url: url,
			type: "get",
			async: false,
			timeout: 20000,
			success: function(ret) {
				if(ret == 'ok') {
					$('#divOffice').hide();
					for(var i = 0; i < fjIdArr.length; i++) {
						$("#acc_tr_" + fjIdArr[i]).remove();
					}
					$("#divStatus").html("成功删除" + fjIdArr.length + "个附件！");
				} else {
					alert("delete error！");
				}
			},
			error: function() {
				alert("delete error！");
			}
		});
	}
}

function chAll() {
	if ($("#chAll").prop("checked")) {
		$("input[name='acc']").each(function () {
			this.checked = true;
		});
	 } else {
		$("input[name='acc']").each(function () {
			this.checked = false;
		});
	 }
}
</script>

<table border="0" cellpadding="0" cellspacing="0">
	<tr><th colspan="2">附件列表</th></tr>
	<tr>
		<th><input id="chAll" name="chAll" type="checkbox" onclick="chAll()"/></th>
		<th>文件名称</th>
	</tr>
	<tbody id="Tab">
		<s:if test="attachmentList == null || attachmentList.size < 1">
			<tr id="acc_tr_0" >
				<td align="center"  colspan="2">暂无附件。</td>
			</tr>
		</s:if>
		<s:else>
			<s:iterator value="attachmentList" status="stat" id="attachment">
				<tr id="acc_tr_<s:property value="#attachment.id" />" >
					<td align="center" width="10px">
						<input name="acc" type="checkbox" value="<s:property value="#attachment.id" />" />
					</td>
					<td align="left" style="padding-top: 8px;padding-bottom: 8px;">
						<a href="javascript:void(0)" 
							onclick="doEdit('<s:property value='#attachment.id'/>');">
							<s:property value="#attachment.fileName" />
						</a>
					</td>
				</tr>
			</s:iterator>
		</s:else>
	</tbody>
</table>
<br />
<div style="padding: 6px 0 0 2px;">
	<input class="input_bt" onclick="deleteFiles()" type="button" value="删除" style="width: 100px; height: 30px; float: left;"/>
	 
	<span id="spanButtonPlaceHolder"></span>
</div>
<span id="fsUploadProgress" style="display;"></span>
<div id="divStatus" style="padding-left: 4px; margin-top: 4px;"></div>
<span id="btnCancel" style="display: none;"></span>

实际使用过程中需要注意请求的地址可能会被拦截，可以将sessionID作为请求参数，加上随机串一同请求。同时需要注意swfupload在win10的IE11下会出现问题，由于所在项目支持为IE8，未对win10的IE11进行兼容，但是win7的IE11未发现问题。