Web框架UI系列—平台四种组件类控件往文件服务器上传文件

在上一篇开发平台四种组件类控件一中我们介绍了图片上传到服务器服务器的控件使用方法,我们今天我们来介绍一下快速开发平台里面四种组件类控件往文件服务器上传控件。

快速开发平台的四种特殊组件(自定义组件):图片、文件上传、时间、富文本

文件自定义控件

快速开发平台文件类自定义控件

空间展示如图所示,在开发平台中文件类控件其实有这一种,用于上传到专用文件服务器中的一种控件,其在软件平台中自定义路径为:Views\Shared\EditorTemplates\ FileUploadTemplate.cshtml,部分源码如下:


@model string
@{
    var filePath = System.Configuration.ConfigurationManager.AppSettings["filePath"] + "/" + Convert.ToString(ViewData["FilePath"] + "/" ?? "certificate/");/*上传路径*/
    //bool state = true;// ViewData["state"] != null ? (bool)ViewData["state"] : true; /*清楚图片时是否保留路径*/
    var fullId = ViewData.TemplateInfo.GetFullHtmlFieldId("");
    var fullName = ViewData.TemplateInfo.GetFullHtmlFieldName("") + Guid.NewGuid();
    string editShow = Model == null ? " hidden" : "";
    string createShow = Model != null ? " hidden" : "";
    string serverType = YunMFramework.Web.AppCode.FileType.File.ToString();
}
<p tp="p_uploadFile" style="position:relative;" maxSize="@(System.Configuration.ConfigurationManager.AppSettings["FileMaxSize"])">
    <input id="FilePathList" name="FilePathList" type="hidden" value="@Model">
    <span class="spanname" style="padding-top: 40px; padding-bottom: 50px;">

    @Html.TextBoxFor(w => w, new { @class = "form-control",tp="inputback" })

    @*自定义文件路径*@@Html.TextBox("cfileupPath", Model, new { @class = "input1" + editShow, @style = "width:0;height:0;" })

    <input id="file@(fullId)" name="file@(fullName)" style="height: 35px; width: 60px; position: absolute; top: 75px; opacity: 0; *left: 160px; cursor: pointer; filter: alpha(opacity=0);" class="input1" type="file" title="@(Model==null?"上传":"修改")文件" />

    <input class="btn_up" value="@(Model==null?"上传":"修改")文件" tp="upLoadFile" servertype="@serverType" specialpath="@filePath" id="btn_upload@(fullId)" type="button" onmouseover="floatFile(this)" />
    
    <i class="tips">
        (文件大小不能超过@(System.Configuration.ConfigurationManager.AppSettings["FileMaxSize"])M)
    </i>
    @Html.ValidationMessageFor(w => w)
</p>


<script type="text/javascript">
    $('#file@(fullId)').change(upLoadFile);
</script>

大家可以看到源码段里面有一个javascript脚本:

$(this.form).ajaxSubmit({
	url: "/UpLoadControl/Uploadfile",
	data: { "filepath": accBtn.attr("specialPath"), "fileName": accFile.attr("name"), "serverType": accBtn.attr("serverType"), "sizestyle": sizestyle },
	dataType: "text",
	type: "POST",
	success: function (json) {
		responseText = eval("(" + json + ")");
		if (responseText.Detail == "error" || responseText.Code < 0) {
			alert("上传失败,请重试");
			return;
		} else if (responseText.Detail == "big") {
			var maxSize = accFile.parents("p[tp='p_uploadFile']").attr("maxSize");
			alert("文件大小不能超过" + maxSize + "KB");
			return;
		} else {
			var arrtext = responseText.Detail.split('|');
			accFile.prev().val(arrtext[0]);
			try {
				accFile.prevAll("input[name='FilePathList']").eq(0).val(arrtext[0]);
			} catch (e) { }
			accFile.prevAll("input[tp='inputback']").eq(0).val(arrtext[0]);
			accFile.prevAll("input[tp='inputback']").eq(0).valid && accFile.prevAll("input[tp='inputback']").eq(0).valid();
			accFile.prevAll("input[tp='inputback']").focus();
			accFile.prevAll("input[tp='inputback']").blur();

			accFile.prev().show();                     
		  
			accFile.trigger("changecookiefile");
		}
	}
});

url里面是我们后台action函数:/UpLoadControl/Uploadfile,进入UpLoadControl控制器的Uploadfile方法大家可以看下怎么去上传文件的,这里不多阐述。

自定义好一个这样的控件,那么我们该怎么去给页面调用呢,先看下我们一个调用示例(具体可以见简历主从表的创建页面):

@Html.ResourceLabelFor(model => model.Attachment,  new { @class = "control-label col-md-1 field-required" })
<div class="col-md-3">
	@Html.EditorTemplateFor(w => w.Attachment, templateName: "FileUploadTemplate")
	@Html.ValidationMessageFor(model => model.Attachment, "", new { @class = "text-danger" })
</div>
我们可以看到里面的代码段:
@Html.EditorTemplateFor(w => w.Attachment, templateName: "FileUploadTemplate")

这是个HTML页面的扩展方法,用于往HTML页面里面插入我们的自定义控件FileUploadTemplate,我们大部分的页面扩展方法在Extensions文件夹下LayoutExtensions.cs类里面,具体大家去看代码了。

今天主要给大家讲解了图片控件的自定义方法和调用操作,后面分章节继续给大家介绍图片控件、时间控件和富文本控件。

标签: 快速开发平台页面控件组件讲解

网站&系统开发技术学习交流群:463167176

本站文章除注明转载外,均为本站原创或翻译,欢迎任何形式的转载,但请务必注明出处,尊重他人劳动,共创和谐网络环境。
转载请注明:文章转载自:软件开发框架 » Web框架UI系列—平台四种组件类控件往文件服务器上传文件
本文标题:Web框架UI系列—平台四种组件类控件往文件服务器上传文件
本文地址:http://www.hocode.com/OrgTec/UI/0034.html

相关文章: 快速开发框架打印模板配置及其开发架构

电话
电话 18718672256

扫一扫
二维码