封装Web Uploader 上传插件、My97DatePicker、百度 编辑器 的使用 (ASP.NET MVC)
2016-06-28 15:35
966 查看
Web Uploader:
WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主,FLASH为辅的现代文件上传组件。在现代的浏览器里面能充分发挥HTML5的优势,同时又不摒弃主流IE浏览器,沿用原来的FLASH运行时,兼容IE6+,iOS 6+, android 4+。两套运行时,同样的调用方式,可供用户任意选用。
采用大文件分片并发上传,极大的提高了文件上传效率
下载地址:http://fex-team.github.io/webuploader/
在asp.net mvc 里使用这个插件的时候。每次都需要引用css.js和一些js逻辑代码
比较臃肿..试想一个页面里如果有十几个上传的地方。该怎么办呢?
这里呢。就封装了 Web Uploader 的使用。
使用起来非常简单:
accept_extensions:允许的文件后缀,不带点,多个用逗号分割;例:gif,jpg,jpeg,bmp,png
UploadFileType:上传文件类型
fileNumLimit:文件总数量
更多参数,请F12查看
结果:
My97DatePicker:
结果:
百度编辑器:
ToolBar:工具栏配置(基础工具栏、 基础工具栏(带查看源码)、完整工具栏)
Plugins:使用的编辑器
/// <summary>
/// CK Editor 功能强大的编辑器
/// <para>推荐使用</para>
/// </summary>
CKEDITOR,
/// <summary>
/// Kinde Editor 一款国产的编辑器
/// </summary>
KINDEDITOR,
/// <summary>
/// UEditor 百度出的一款编辑器
/// <para>界面更符合国人审美观</para>
/// <para>推荐使用</para>
/// </summary>
UEDITOR,
/// <summary>
/// UMEditor UEditor的简化版
/// <para>适合给网站用户(前台)使用</para>
/// </summary>
UMEDITOR
更多参数,请F12查看
结果:
这里 可以配置宽高。工具栏等等。
还支持 ckeditor编辑器。kindeditor编辑器
1.更新了。多图上传的时候,每张图片都可以添加标题:
2.更新了 ckeditor编辑器 皮肤。基于office2013的
百度云:链接: http://pan.baidu.com/s/1o8jN4Ie 密码: wusx (更新时间:2016-10-31)
WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主,FLASH为辅的现代文件上传组件。在现代的浏览器里面能充分发挥HTML5的优势,同时又不摒弃主流IE浏览器,沿用原来的FLASH运行时,兼容IE6+,iOS 6+, android 4+。两套运行时,同样的调用方式,可供用户任意选用。
采用大文件分片并发上传,极大的提高了文件上传效率
下载地址:http://fex-team.github.io/webuploader/
在asp.net mvc 里使用这个插件的时候。每次都需要引用css.js和一些js逻辑代码
比较臃肿..试想一个页面里如果有十几个上传的地方。该怎么办呢?
这里呢。就封装了 Web Uploader 的使用。
使用起来非常简单:
<blockquote> <p>带文本框的上传 </p> @Html.WebUploader("files", new WebUploader { accept_extensions = "zip,rar,png,jpg", UploadFileType = UploadfilesHelper.UploadFileType.File, fileNumLimit = 1, ButtonText = "提交附件", InputModel = true, duplicate = true, style = "width:293px", table_style = "margin-top: -4px;" }) <div> <code>[InputModel = true]</code><br /> <code>[duplicate = true] :是否可以重复上传</code> </div> </blockquote> <blockquote> <p>带按钮的上传 </p> @Html.WebUploader("files-2", new WebUploader { accept_extensions = "zip,rar,png,jpg", UploadFileType = UploadfilesHelper.UploadFileType.File, fileNumLimit = 10, ButtonText = "提交附件", style = "width:293px", table_style = "margin-top: -4px;" }) <div><code>[InputModel = false]</code></div> </blockquote>
accept_extensions:允许的文件后缀,不带点,多个用逗号分割;例:gif,jpg,jpeg,bmp,png
UploadFileType:上传文件类型
fileNumLimit:文件总数量
更多参数,请F12查看
结果:
My97DatePicker:
<blockquote> <p>My97DatePicker 时间 </p> @Html.Calendar("time") </blockquote>
结果:
百度编辑器:
<blockquote> <p>百度编辑器 </p> @Html.RichTextEditor("edit", new RichTextEditor { Height = 300, ToolBar = RichTextEditorToolBar.Full, Plugins = RichTextEditorPlugins.UMEDITOR, Width = 600 }) </blockquote>
ToolBar:工具栏配置(基础工具栏、 基础工具栏(带查看源码)、完整工具栏)
Plugins:使用的编辑器
/// <summary>
/// CK Editor 功能强大的编辑器
/// <para>推荐使用</para>
/// </summary>
CKEDITOR,
/// <summary>
/// Kinde Editor 一款国产的编辑器
/// </summary>
KINDEDITOR,
/// <summary>
/// UEditor 百度出的一款编辑器
/// <para>界面更符合国人审美观</para>
/// <para>推荐使用</para>
/// </summary>
UEDITOR,
/// <summary>
/// UMEditor UEditor的简化版
/// <para>适合给网站用户(前台)使用</para>
/// </summary>
UMEDITOR
更多参数,请F12查看
结果:
这里 可以配置宽高。工具栏等等。
还支持 ckeditor编辑器。kindeditor编辑器
1.更新了。多图上传的时候,每张图片都可以添加标题:
2.更新了 ckeditor编辑器 皮肤。基于office2013的
百度云:链接: http://pan.baidu.com/s/1o8jN4Ie 密码: wusx (更新时间:2016-10-31)
相关文章推荐
- 理解SVG的viewport,viewBox,preserveAspectRatio
- ASP.NET(C#)中两日期相减,如何得到相差的月份数
- ASP.NET MVC生命周期介绍(转)
- (转)理解ASP.NET MVC执行过程
- 在ASP.NET中使用Session
- ASP.NET通过第三方网站Bitly实现短链接地址程序
- 开源Asp.Net Core小型社区系统
- ASP.NET控件之RadioButtonList
- Aspose.Cells 读取受保护有密码的Excel文件
- ASP.Net MVC开发基础学习笔记(1):走向MVC模式
- aspnet调用sqlserver分页存储过程
- 使用VS Code开发调试ASP.NET Core 1.0
- ASP.NET web.config 配置节点详解
- Asp.net中Request.Url的各个属性对应的意义介绍
- ASP.Net MVC 布局页 模板页 使用方法详细说明
- ASP.NET 链接MySQL数据库
- Asp.Net MVC4 系列--进阶篇之路由 (2)
- 如何做一个基于ASP.NET MVC 网站(一)
- .NET Core & ASP.NET Core 1.0在Redhat峰会上正式发布
- .NET Core & ASP.NET Core 1.0在Redhat峰会上正式发布