<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)的更多相关文章

  1. Vue的移动端多图上传插件vue-easy-uploader

    原文地址 前言 这段时间赶项目,需要用到多文件上传,用Vue进行前端项目开发.在网上找了不少插件,都不是十分满意,有的使用起来繁琐,有的不能适应本项目.就打算自己折腾一下,写一个Vue的上传插件,一劳 ...

  2. Bootstrap FileInput 多图上传插件 文档属性说明

    Bootstrap FileInput 多图上传插件   原文链接:http://blog.csdn.net/misterwho/article/details/72886248?utm_source ...

  3. yii2组件之多图上传插件FileInput的详细使用

    作者:白狼 出处:http://www.manks.top/yii2_multiply_images.html 本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连 ...

  4. SWFUpload多图上传、C#后端跨域传文件带参数

    前几天工作中用到了SWFUpload上传图片,涉及到跨域,因为前端无法实现跨域,所以只能把文件传到后端进行跨域请求,整理分享下. 效果图 前端 html部分 <!DOCTYPE html> ...

  5. 帝国CMS7.2新增多图同时上传插件,上传多图效率更高

    原来上传多图文件,需要挨个选择文件,然后再点批量上传,比较麻烦.所以帝国CMS7.2新增了多图上传插件:为采用FLASH方式实现同时选择多个图片一起上传,提高多图上传效率. 帝国CMS多图上传插件特性 ...

  6. PHP之:多图上传

    撰写日期:2016-6-30 15:17:35 Thursday 参考 http://a3147972.blog.51cto.com/2366547/1381136 (08-05ThinkPHP+sw ...

  7. SWFUpload批量上传插件

    SWFUpload是一个批量上传插件,在HTML4.1里面,估计也只有Flash+javascript配合才能够做到了.先复制个重要的网址,这个应该是官方的文档了,相当齐全. http://leeon ...

  8. 封装Web Uploader 上传插件、My97DatePicker、百度 编辑器 的使用 (ASP.NET MVC)

    Web Uploader: WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主,FLASH为辅的现代文件上传组件.在现代的浏览器里面能充分发挥HTML5的优 ...

  9. ASP.NET MVC5+EF6+EasyUI 后台管理系统(32)-swfupload多文件上传[附源码]

    系列目录 文件上传这东西说到底有时候很痛,原来的asp.net服务器控件提供了很简单的上传,但是有回传,还没有进度条提示.这次我们演示利用swfupload多文件上传,项目上文件上传是比不可少的,大家 ...

随机推荐

  1. 阿里巴巴Java开发手册快速学习

    Java作为一门名副其实的工业级语言,语法友好,学习简单,大规模的应用给代码质量的管控带来了困难,特别是团队开发中,开发过程中的规范会直接影响最终项目的稳定性. 善医者“未有形而除之”,提高工程健壮性 ...

  2. JavaScript 图片轮播入门

    轮播要求:一个在页面居中的矩形框,图片依次从矩形框中经过 当图片完整占满矩形框时 停留一小段时间再向左边移动经过矩形框的图片自动跑到右边最后一个图的后面.核心原理:在一个for循环中利用offsetl ...

  3. MySQL学习分享-->查询-->查询的原理

    查询的原理 在一个查询中常包含下述子句: 1.select,2.distinct,3.join,4.on,5.from,6.where,7.having,8.group by,9.order by,1 ...

  4. 深入理解 JavaScript 异步系列(4)—— Generator

    第一部分,ES6 中的 Generator 原文地址 http://www.cnblogs.com/wangfupeng1988/p/6532713.html 未经作者允许不得转载~ 在 ES6 出现 ...

  5. 关于百度地图js api的getCurrentPosition定位不准确的解决方法

    很久之前帮大叔解决了一个gps坐标转换为百度地图坐标的问题.今天大叔又给我讲百度地图定位不准.我查了一下api,用了官方给出的这样一组函数. //创建查询对象 var geolocation = ne ...

  6. 数据库 sql 表连接

    表链接 分为 横向链接   和纵向链接 横向链接 select * from student,score --笛卡尔积 查询所有表 会出现 笛卡尔积  就是所有匹配的结果都会展示一遍 为防止以上情况 ...

  7. javascript解析机制、闭包详解

    js解析机制: js代码解析之前会创建一个如下的词法环境对象(仓库):LexicalEnvironment{ } 在扫描js代码时会把: 1.用声明的方式创建的函数的名字: 2.用var定义的变量的名 ...

  8. Cordova原理一

    我们知道cordova中js要和native通信都是通过 cordova plugin来实现的.如果我们自己创建一个cordova plugin,它其实就是几个独立的文件按照一定的目录结构放在一起,然 ...

  9. node.js 基础知识之 querystring.stringify querystring.escape

    序列化   1.  querystring.stringify({name:'chenshuai',ago:21,job:"web"})    'name=chenshuai&am ...

  10. Android自学反思总结(上)

    从接触Android到现在有几个月的时间了,基本全部都是靠自学,从大一上学期学习完c语言,接着利用寒假时间和开学一个月左右的时间自学完javase,接着在导员的督促下,开始了Android学习之旅,现 ...