swfupload多图上传插件(ASP.NET)
<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> <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>
效果图:
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。