layui上传图片

html

选择图片 开始上传

js var HidImgs = [];

$(function () {
HidImgs = [];
$(‘#progressImg’).hide();
$(‘#upFilesBtn’).addClass(‘layui-btn-disabled’);
}
layui.use([‘layer’, ‘element’, ‘upload’], function () {
var layer = layui.layer;
var upload = layui.upload;
var element = layui.element;
//普通图片上传
var uploadInst = upload.render({
elem: ‘#upFiles’,
url: setter.host + ‘/File/UploadFile’, //改成您自己的上传接口
auto: false,
bindAction: ‘#upFilesBtn’,
accept: ‘images’,
choose: function (obj) {
console.log(obj)
if (HidImgs.length>0) {
layer.confirm(‘确定要替换掉原来的轮播图片吗？’, {
btn: [‘确定’, ‘取消’, ],//可以无限个按钮
}, function (index, layero) {
//按钮【按钮一】的回调
//预读本地文件示例，不支持ie8
obj.preview(function (indexP, file, result) {
$(‘#previewImg’).attr(‘src’, result); //图片链接（base64）
element.progress(‘progressImg’, ‘0%’);
$(‘#progressImg’).show();
$(‘#upFilesBtn’).removeClass(‘layui-btn-disabled’);
HidImgs = [];
layer.close(index);
});
}, function (index) {
//按钮【按钮二】的回调
});
} else {
//预读本地文件示例，不支持ie8
obj.preview(function (indexP, file, result) {
$(‘#previewImg’).attr(‘src’, result); //图片链接（base64）
$(‘#upFilesBtn’).removeClass(‘layui-btn-disabled’);
$(‘#progressImg’).show();
element.progress(‘progressImg’, ‘0%’);
});
}

        },
        progress: function(n, elem){
            var percent = n + '%' //获取进度百分比
            element.progress('progressImg', percent); //可配合 layui 进度条元素使用
            //以下系 layui 2.5.6 新增
           // console.log(elem); //得到当前触发的元素 DOM 对象。可通过该元素定义的属性值匹配到对应的进度条。
        },
        before: function (obj) {
            //预读本地文件示例，不支持ie8
            obj.preview(function (index, file, result) {
                $('#demo1').attr('src', result); //图片链接（base64）
            });
        },
        done: function (res) {
            //如果上传失败
            if (res.code > 0) {
                return layer.msg('上传失败');
            } else {
                layer.msg('上传成功');
                HidImgs = [{ name: res.name, path: res.path }];
            }
            //上传成功
        },
        error: function (index, upload) {
            //演示失败状态，并实现重传
            var demoText = $('#demoText');
            demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
            demoText.find('.demo-reload').on('click', function () {
                uploadInst.upload();
            });
        }
    });
});

//新增
$(‘.BtnOfadd’).click(function () {
CleanInput();
var time = new Date();
$(“#ImgCreateTime”).val(time.getFullYear() + “-” + time.getMonth() + “-” + time.getDate() + " " + time.getHours() + “:” + time.getMinutes() + “:” + time.getSeconds());
$(“#txtIsshow”).val(1);
var userInfo = JSON.parse(getStorage(“userInfo”));
$(“#ImgCreateUser”).val(userInfo.User_RealName);
$(‘#formTitle’).text(‘新增图片’);
$(‘#modal-form’).modal(‘show’);
HidImgs = [];
$(‘#previewImg’).attr(‘src’, “”);
$(‘#progressImg’).hide();
});

//根据id查询详情
function getSingle(id) {
Ajax(‘post’, setter.host + ‘/YHJiChuGuanLi/GetSingleBannerImg’, { id: id }, function (result) {
if (result.code == 0) {

            HidImgs = JSON.parse(!isJSON(result.data.ImpUrl) ? "[]" : result.data.ImpUrl);
            if (HidImgs.length>0) {
                $('#previewImg').attr('src', setter.addHost + HidImgs[0].path)
            }
            $('#formTitle').text('编辑图片信息');
            $('#modal-form').modal('show');
        } else {
            tipsForm('error', result.msg);
        }
    })
}

//保存
function saveForm(){
if (HidImgs.length > 0) {
formData.ImpUrl = JSON.stringify(HidImgs);
} else {
formData.ImpUrl = ‘’;
tipsForm(‘error’, ‘请上传图片’);
return;
}
}

---

/File/UploadFile
public JsonResult UploadFile()
{
Controller cxt = this;
try
{
string imgPath = “/Uploads/Images/”;
string docPath = “/Uploads/Document/”;
string videoPath = “/Uploads/Video/”;
string otherPath = “/Uploads/Other/”;
string[] imgArr = new string[] { “.gif”, “.jpg”, “.jpeg”, “.png”, “.bmp” };
string[] docArr = new string[] { “.doc”, “.docx”, “.xls”, “.xlsx”, “.pdf”, “.ppt”, “.txt” };
string[] videoArr = new string[] { “.avi”, “.mov”, “.rmvb”, “.rm”, “.flv”, “.mp4”, “.flash” };
string[] otherArr = new string[] { “.zip”, “.rar”, “.7z” };
HttpPostedFileBase uploadFile = null;
//string value1 = cxt.Request[“path”];
//value1 = HttpUtility.UrlDecode(value1);
string path = “”;
string resPath = “”;
uploadFile = cxt.Request.Files[0];
if (uploadFile == null)
{
return Json(new { code = 1, Message = “上传失败:未获取到文件信息！” });
}
string extName = uploadFile.FileName.Substring(uploadFile.FileName.LastIndexOf(‘.’));
if (imgArr.Contains(extName))
{
path = Server.MapPath(imgPath);
resPath = imgPath;
}
else if (docArr.Contains(extName))
{
path = Server.MapPath(docPath);
resPath = docPath;
}
else if (videoArr.Contains(extName))
{
path = Server.MapPath(videoPath);
resPath = videoPath;
}
else
{
path = Server.MapPath(otherPath);
resPath = otherPath;
}
if (!Directory.Exists(path))
{
Directory.CreateDirectory(path);
}
string oldName = uploadFile.FileName;
string fileName = Guid.NewGuid().ToString() + uploadFile.FileName.Substring((uploadFile.FileName.LastIndexOf(‘.’)), (uploadFile.FileName.Length - uploadFile.FileName.LastIndexOf(‘.’)));
uploadFile.SaveAs(path + fileName);
return Json(new { code = 0, Message = “上传成功！”, path = resPath + fileName, name = oldName });
}
catch (Exception ex)
{
return Json(new { code = 1, Message = “上传失败！” + ex.ToString() });
}
}