在Shared中创建一个uc/_upload.cshtml
这里面的主要的代码是
public class UploadContent { private UploadContent() { } public UploadContent(string name,string src,string style="") { this.Name = name; this.Src = src; if(!string.IsNullOrEmpty(style)) this.Style = style; } public string Title { get; set; } = "图片"; public string Name { get; set; } public string Id { get; set; } = "_uploadpic" + new Random().Next(1000); public string Tip { get; set; } = "点击上传,或将文件拖拽到此处"; public string Src { get; set; } public string Style { get; set; } = "200px"; }
@model UploadContent @{ Layout = null; var title = Model.Title; var name = Model.Name; var id = Model.Id; var tip = Model.Tip; var src = Model.Src; var style = Model.Style; } <div class="layui-form-item"> <label class="layui-form-label">@title</label> <div class="layui-input-block"> <div class="layui-upload-drag" id="@id"> <i class="layui-icon">�</i> <p>@tip</p> </div> <div> <img id="@(id)UrlImg" src="@(BaseUrl+src)" class="@(!string.IsNullOrEmpty(src.SafeToString())?"true":"hide")" style="@style" /> </div> <input type="hidden" name="@name" id="@(id)Url" value="@src"/> @*@Html.ValidationMessageFor(model => model.pic, "", new { @class = "text-danger" })*@ </div> </div><script> setTimeout(function () { //拖拽上传 layui.upload.render({ elem: '#@(id)' , url: '/api/ajax/upload' , multiple: true , done: function (result) { result.msg && layer.msg(result.msg); if (result && result.data && result.data.length > 0 && result.data[0]) { $('#@(id)Url').val(result.data[0]); $('#@(id)UrlImg').attr('src', baseUrl + result.data[0]).removeClass('hide'); } } }); },2000)
</script>
使用 @Html.Partial("uc/_upload", new UploadContent("pic", Model?.pic))
可以在同一个页面使用多此