swfupload多图上传插件(ASP.NET)

时间:2022-06-01 14:15:02
   <script src="../js/swfupload/swfupload.js" type="text/javascript"></script>

<script src="../js/swfupload/swfupload.queue.js" type="text/javascript"></script>

<script src="../js/swfupload/fileprogress.js" type="text/javascript"></script>

<script src="swfMgr/handlers.js" type="text/javascript"></script>



<tr <%=tp_addList %> id="tp_addList">
<td class="left_title_2" width="100px">
上传图片列表:
</td>
<td id="Td1">
<%--上传多个图片--%>
<div align="left">
<input id="middleImg" /><span style="color: Red;">注明:图片以(655*500),单个文件最大5000KB;默认设置最后一张为首页图片,图片名不能重复,一张张按照顺序上传</span>
<p id="fileQueue2" style="width: 320px; margin: 0 auto;">
</p>
<ul id="ulList">
</ul>
</div>
</td>
</tr>




<asp:HiddenField ID="hidStr" runat="server" Value="" />
<asp:HiddenField ID="hidFolder" runat="server" Value="0" />



<script type="text/javascript">
var tmpFolder = $("#hidFolder").val();
var tmpNum = 0;
var tmpTotal = 0;

function uploadSuccessOther(file, serverData) {
try {
var progress = new FileProgress(file, this.customSettings.upload_target);
progress.setComplete();
progress.setStatus(
"正在上传!");
progress.toggleCancel(
false);
}
catch (ex) {
//alert(ex.message);
}
//成功后,处理
$("#ulList").append('<li><table><tbody><tr><td><img width="100" src="../../img/' + tmpFolder + '/100/' + serverData + '"></td></tr><tr><td><label><input type="radio" class="setIndex" style="margin-right: 5px;" name="rdo" value="' + serverData + '">首页显示</label>&nbsp;<a style="color: Red;" href="javascript:;" class="delImg">删除</a></td></tr></tbody></table></li>');
$(
"#info_tp_add").val(serverData); //隐藏图片路径

tmpTotal
+= 1;
if (tmpNum == tmpTotal) {
$(
".ajaxloading").hide();
window.onbeforeunload
= function() { };
$(
".saveClass").removeAttr("disabled", "disabled");
}
}

function fileDialogCompleteOther(numFilesSelected, numFilesQueued) {
try {
tmpNum
= parseInt(numFilesQueued);
if (tmpNum > 0) {
this.startUpload();
$(
"#divLoading").css({ height: $(window).height() + 150 + tmpNum * 50 });
$(
".ajaxloading").css({ top: $(window).scrollTop() + 150 }).show();
// $(".saveClass").attr("disabled", "disabled"); //在上传过程中将保持按钮禁用

// window.onbeforeunload = function() { return ("确认离开当前页面吗?未保存的数据将会丢失!"); }
} else {
}
}
catch (ex) {
//this.debug(ex);
}
}

//
var swfMiddle;
window.onload
= function() {
swfMiddle
= new SWFUpload({
// Backend Settings
upload_url: "swfMgr/Handler.ashx",
post_params: {
'ASPSESSID': '<%=Session.SessionID %>',
'Folder': tmpFolder,
't': 'i'
},

// File Upload Settings
file_size_limit: "5000",
file_types:
"*.jpg;*.png",
file_types_description:
"JPG,PNG",
file_upload_limit:
0, // Zero means unlimited


swfupload_preload_handler: preLoad,
swfupload_load_failed_handler: loadFailed,
file_queue_error_handler: fileQueueError,
//队列错误
file_dialog_complete_handler: fileDialogCompleteOther,
upload_progress_handler: uploadProgress,
upload_error_handler: uploadError,
upload_success_handler: uploadSuccessOther,
upload_complete_handler: uploadComplete,

// Button settings
button_image_url: "../js/swfupload/buttons/XPButtonNoText_61x22.png",
button_placeholder_id:
"middleImg",
button_width:
61,
button_height:
22,
button_text:
'<span class="button">添加图片<span class="buttonSmall"></span></span>',
button_text_style:
'.button { font-family: Helvetica, Arial, sans-serif; font-size: 12px;font-weight:bold;} .buttonSmall { font-size: 12px; }',
button_text_top_padding:
1,
button_text_left_padding:
5,

button_cursor: SWFUpload.CURSOR.HAND,
button_window_mode: SWFUpload.WINDOW_MODE.TRANSPARENT,

// Flash Settings
flash_url: "../js/swfupload/swfupload.swf", // Relative to this file
flash9_url: "../js/swfupload/swfupload_FP9.swf", // Relative to this file

custom_settings: {
upload_target:
"fileQueue2"
}
//图片上传
});
}



</script>

<script type="text/javascript">
$(
function() {

//删除该上传图片
$(document).delegate(".delImg", "click", function() {
if ($(this).prev().find("input").attr("checked")) {
alert(
'已经设置首页的图片无法删除!');
return false;
}

if (!confirm("确定要删除这张图片吗?")) return false;
var tmpLi = $(this).parents("li").eq(0);
$.post(
"swfMgr/fileMgr.ashx", {
t:
"del",
f: $(
"#hidFolder").val(),
n: $(
this).prev().find("input").val()
},
function(rdata) {
if (rdata = "1") {
tmpLi.remove();
}
});
});

//首页显示
$(document).delegate(".setIndex", "click", function() {
var value = $(this).val();
if (!confirm("确定要设置这张图片首页显示吗?")) return false;
$(
"#info_tp_add").val(value); //确定保存后隐藏图片路径
});
});
</script>

 

效果图:

swfupload多图上传插件(ASP.NET)