layui实现图片上传

页面代码：

<style>
   .uploadImgBtn2{
        width: 120px;
        height: 92px;
        cursor: pointer;
        position: relative;
        -webkit-background-size: cover;
        background-size: cover;
        line-height: 92px;
        text-align: center;
        border: 1px SOLID #d2d2d2;
        color: #d2d2d2;
        float: left;
    }

         .uploadImgBtn2 .uploadImg2{
            position: absolute;
            right: 0;
            top: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            cursor: pointer;
        }
</style>

 

<input type="hidden" id="cardImg2" />

<td>
                            <div class="uploadImgBtn2" id="uploadImgBtn2" style="background:#EBEBE4;">
                                <span>点击上传图片</span>
                                <img id="filImg2" hidden="hidden" />
                                <input type="file" name="file" id="loadFill2" class="uploadImg2" disabled />
                            </div>
                            <span class="uploadimgAdd2"></span>
                        </td>

 

 

后台代码：

public ActionResult UploadLargeImg(string ltlId, int type)
{
int result = 0;
string lFilePath = "";
//Regex rx = new Regex("^[\u4E00-\u9FA5]+$");
if (!string.IsNullOrEmpty(ltlId))
{
try
{
HttpPostedFileBase imageName = Request.Files["file"];// 从前台获取文件
string filePath = "";
filePath = CSysCfg.lFilePath;
if (!Directory.Exists(filePath))
{
Directory.CreateDirectory(filePath);
}
string fileName = System.IO.Path.GetFileName(imageName.FileName);
string expendName = System.IO.Path.GetExtension(fileName);
string newFileName = "";
if (type == 0)
{
newFileName = "OpenImg" + ltlId + expendName;
}
else if (type == 1)
{
newFileName = "PowerImg" + ltlId + expendName;
}
else if (type == 2)
{
newFileName = "ManagerIdCardImg" + ltlId + expendName;
}
else if (type == 3)
{
newFileName = "BusinessLicenseImg" + ltlId + expendName;
}
else if (type == 4)
{
newFileName = "RoadTransportImg" + ltlId + expendName;
}
else if (type == 5)
{
newFileName = "DrivingLicenseImg" + ltlId + expendName;
}
else if (type == 6)
{
newFileName = "GoodsImg" + ltlId + expendName;
}

lFilePath = Path.Combine(filePath, newFileName);
imageName.SaveAs(lFilePath);
result = 1;
}
catch (Exception ex)
{
CSysCfg.WriteLog(ex.Message);
}
}
else
{
result = -1;
}

return Json(new { code = result, headerImgSrc = lFilePath });
}

 

前端调用：

layui.use('upload', function () {
var upload = layui.upload;
var uploadInst = upload.render({
elem: '#loadFill2',
method: 'POST',
auto: true,
size: 2048, //限制文件大小，单位 KB
url: '/BaseInfoPage/UploadLargeImg',//上传图片的接口
bindAction: '#uploadFill',
data: {
ltlId: function () {
return $('#ltl_Id').val();
},
type: function () {
return 1;
}
},
before: function (obj) {
//预读本地文件示例，不支持ie8
obj.preview(function (index, file, result) {
$(".uploadImgBtn2 span").text("");
$('#filImg2').attr('src', result).css({ "width": "100%", "height": "100%", "margin-left": "0px", "display": "block" }); //图片链接（base64）
});
}, done: function (data) {
$(".uploadimgAdd2").empty();
if (data.code == 1) {
$(".uploadImgBtn2").css("border", "1px solid #d2d2d2");
$(".uploadimgAdd2").append("<img src='/Images/validateTrue.png'/> 上传成功！");
$("#ltl_Id").attr("disabled", "disabled");
$("#cardImg2").val(data.headerImgSrc);
}
else if (data.code == -1) {

$(".uploadimgAdd2").append("<img src='/Images/validateFalse.png'/> 请先输入申请编号，在上传！");
}
else {
$(".uploadimgAdd2").append("<img src='/Images/validateFalse.png'/> 上传失败！");
}
}
});
});