1.视图 index (html)代码
<div class="layui-form-item" style="margin-top:20px">
<label class="layui-form-label">站点图片:</label>
<div class="layui-input-block">
<input id="in_StationStationImage" name="StationImage" type="file" style="width: 180px" class="layui-input">
</div>
</div>`
2.js代码
**//以下代码写在自己的确认添加按钮事件**
var nodeData = data.field;
var formData = new FormData();
formData.append("AlarmName", $("#Add_AlarmName").val());
formData.append("AlarmId", $("#Add_AlarmId").val());
formData.append("DisplayOrder", $("#Add_DisplayOrder").val());
formData.append("Memo", $("#Add_Memo").val());
formData.append("StationImage", $("#in_StationStationImage")[0].files[0]);
var json = Invoke_APINew("/LR_Alarm_Parameter/InvokeJS_LR_Alarmpara_InsertOrUpdate", formData);//后台方法
if (json["result"]) {
layer.msg('保存成功', { icon: 6 });
layer.closeAll();
LoadData();
}
else {
layer.msg('保存失败', { icon: 5 });
layer.closeAll();
}
return false;
function Invoke_APINew(url, obj, synchro) {
var json = {};
if (!synchro) {
synchro = false;
}
$.ajax({
url: ".." + url,
data: obj,
type: "POST",
async: synchro,
dataType: "json",
crossDomain: true,
traditional: true,//参数里有数组时用true
contentType: false,//使用formData是用到
processData: false,//使用fromData时用到
success: function (data) {
json = data;
},
error: function (jqXHR, textStatus, errorThrown) {
/*错误信息处理*/
/*
alert("进入error---");
alert("状态码:" + jqXHR.status);
alert("状态:" + jqXHR.readyState); //当前状态,0-未初始化,1-正在载入,2-已经载入,3-数据进行交互,4-完成。
alert("错误信息:" + jqXHR.statusText);
alert("返回响应信息:" + jqXHR.responseText); //这里是详细的信息
alert("请求状态:" + textStatus);
alert(errorThrown);
alert("请求失败");*/
}
});
return json;
}
3.控制器
public JObject InvokeJS_LR_Alarmpara_InsertOrUpdate(HttpPostedFileBase StationImage, string Id, string AlarmId, string AlarmName, string AlarmImg, string Memo, string DisplayOrder, string Border)
{
var model = new LR_AlarmparaModel();
if (string.IsNullOrEmpty(Id))
{
model.Id = ProcessData_GetMaxId();
}
else
{
model.Id = Id;
}
if (StationImage != null)
{
string dir = "/Images/";
//站点文件目录
string fileDir = Server.MapPath(dir);
string imgExtension = Path.GetExtension(StationImage.FileName);
if (!Directory.Exists(fileDir))
Directory.CreateDirectory(fileDir);
var img = "/Images/" + StationImage.FileName;
StationImage.SaveAs(Path.Combine(fileDir, StationImage.FileName));//存储本地方法
model.AlarmImg = img;
}
model.SystemId = USER.SystemID;
model.AlarmId = AlarmId;
model.AlarmName = AlarmName;
model.DisplayOrder = DisplayOrder;
model.Memo = Memo;
var result = InvokeAPI_LR_Alarmpara_InsertOrUpdate(model);
var json = new JObject();
json["result"] = result;
return json;
}
4.layui表格显示
{ field: 'AlarmImg', title: '报警图片', templet: '<div><img src="{{ d.AlarmImg }}" style="width:30px; height:30px;">{{d.AlarmImg}}</div>' },
PS:必须用div包裹 d不用定义直接点出后台传的字段(AlarmImg)字段内容:/Images/1.jpg
效果图: