<!-- 基本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)" οnclick="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" οnclick="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)"
οnclick="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" οnclick="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未发现问题。
笔记整理-swfupload使用实例
最新推荐文章于 2021-02-22 03:40:30 发布