封裝Web Uploader 上傳插件、My97DatePicker、百度 編輯器 的使用 (ASP.NET MVC)

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 的使用。

使用起來非常簡單：

<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）