{tabs-pane label="layui前段写法"} 选取的文件进行预加载并展示,根据表单提交后进行数据文件保存操作,图片文件存在当前项目的目录下
@*图片名称*@
<input id="fileName" name="Photo" type="text" lay-verify="fileName"
autocomplete="off" class="layui-input" disabled>
@*回调的名称*@
<input id="Photo" type="hidden" lay-verify="credentialOne"
autocomplete="off" class="layui-input">
<button class="layui-btn" id="ExamPhoto" type="button">
上传图片
</button>
</div>
<div class="layui-collapse layui-input-block" lay-accordion="" style="width: 399.5px">
<div class="layui-colla-item">
<h2 class="layui-colla-title">展开图片</h2>
<div class="layui-colla-content" id="colla_img" style="">
</div>
</div>
</div>
//图片处理上产
layui.use(['upload'], function () {
upload.render({
elem: '#ExamPhoto'
, url: '/Exam/Examupload'
, size: 5024
, auto: false //不自动上传
, bindAction: '#upload_img' //上传绑定到隐藏按钮
, choose: function (obj) {
//预读本地文件
obj.preview(function (index, file, result) {
$('#fileName').val(file.name); //展示文件名
$('#colla_img').find('img').remove();
$('#colla_img').append('');
})
}
, done: function (res) {//回调函数
$('#Photo').val(res.data); //隐藏输入框赋值
$('#ExxamuserAdd').click(); //上传成功后单击隐藏的提交按钮
}
, error: function (index, upload) {
layer.msg('上传失败!' + index, { icon: 5 });
}
});
}
{/tabs-pane} {tabs-pane label="后台接收"}
string res=string.Empty;
//获取文件
try
{
HttpPostedFileBase file = Request.Files[0];
//取到项目文件的物理路径
string path = Server.MapPath("/images/user/") ;
//二次拦截
if (!Directory.Exists(path))//文件夹不存在
{
Directory.CreateDirectory(path);//创建文件夹
}
path += file.FileName;
if (file.FileName.EndsWith("jpg") || file.FileName.EndsWith("png") || file.FileName.EndsWith("gif"))
{
file.SaveAs(path);//文件进行保存
res = file.FileName;
}
}
catch (Exception)
{
res = "NO";
}
var json = new
{
cod = 0,
data = res
};
return Json(json, JsonRequestBehavior.AllowGet);
{/tabs-pane}
本文共 195 个字数,平均阅读时长 ≈ 1分钟