2017-11-23  3,144 views 2

ASP.NET MVC5 使用Layui 2.2.2 上传组件上传简单示例文件(图片)

实现效果及UI如下:

asp.net mvc5 使用layui2.2.2 上传图片 页面

asp.net mvc5 使用layui2.2.2 上传图片 页面

 

asp.net mvc5 使用layui2.2.2 上传图片 成功提示

asp.net mvc5 使用layui2.2.2 上传图片 成功提示

 

asp.net mvc5 使用layui2.2.2 上传图片 文件夹图片

asp.net mvc5 使用layui2.2.2 上传图片 文件夹图片

 

视图(View)HTML代码:

<div class="layui-form-item">
    <label class="layui-form-label">上传图片</label>
    <div class="layui-input-block layui-upload">
        <button type="button" class="layui-btn" id="btn_UploadImage">上传图片</button>
        <div class="layui-upload-list">
            <img class="layui-upload-img" id="previewBox">
            <p id="remindText"></p>
        </div>
    </div>
</div>

JS实现代码:

var $;
layui.use(['form', 'layer', 'jquery','upload'], function () {
    var form = layui.form,
    layer = parent.layer === undefined ? layui.layer : parent.layer,
    laypage = layui.laypage, upload = layui.upload;
    $ = layui.jquery;

    //单张图片上传
    var uploadInst = upload.render({
        elem: '#btn_UploadImage'
      , url: '../CarouselPicture/Upload'
      , before: function (obj) {
          //预读本地文件,需要IE9及以上版本
          obj.preview(function (index, file, result) {
              $('#previewBox').attr('src', result); //图片链接(base64)
          });
      }, done: function (data) {
          //如果上传失败
          if (data.Code != 0) {
              return layer.msg(data.Message);
          }
          //上传成功
          else {
              //设置图片地址
              $(".PicOSSUri").val(data.Data.src);
              $(".PicOSSUri").attr("readonly", "readonly");
              $(".PicOSSUri").css("background-color", "#EBEBE4");
              return layer.msg(data.Message + ":" + data.Data.src);
          }
      }, error: function () {
          //重传
          var demoText = $('#remindText');
          demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini upload-reload">重试</a>');
          demoText.find('.upload-reload').on('click', function () {
              uploadInst.upload();
          });
      }
    });
});

后台Controller实现代码:

/// <summary>
/// 上传轮播图片
/// </summary>
/// <returns></returns>
[HttpPost]
public ActionResult Upload()
{
    #region + 变量
    //文件大小(字节数)
    long fileSize = 0;
    //重命名的文件名称
    string tempName = "";
    //物理路径+重命名的文件名称
    string fileName = "";
    //文件扩展名
    string extname = "";
    //虚拟路径
    string virtualPath = "/Uploads/Advs/Carousels/";
    //上传固定路径
    string path = Server.MapPath(virtualPath);
    //上传文件夹名称
    string dir = "";
    //获取提交的文件
    var file = Request.Files[0];    
    //反馈对象        
    BaseGetResponse<object> _response = new BaseGetResponse<object>();
    #endregion

    #region + 服务器本地文件上传处理

    try
    {
        if (file != null && !string.IsNullOrEmpty(file.FileName))
        {
            dir = DateTime.Now.ToString("yyyy-MM-dd");
            if (!Directory.Exists(path + dir))
            {
                Directory.CreateDirectory(path + dir);
            }
            extname = file.FileName.Substring(file.FileName.LastIndexOf('.'), (file.FileName.Length - file.FileName.LastIndexOf('.')));
            tempName = Guid.NewGuid().ToString().Substring(0, 6) + extname;
            fileName = path + dir+ "/" + tempName;
            fileSize += file.ContentLength;
            using (FileStream fs = System.IO.File.Create(fileName))
            {
                file.InputStream.CopyTo(fs);
                fs.Flush();
            }
            _response.Data = new
            {
                src = virtualPath + dir + "/" + tempName,
            };
            _response.Message = "服务器本地上传成功";
        }
    }
    catch (Exception ex)
    {
        _response.Code = ResultCode.UnknownException;
        _response.Message = "服务器本地上传失败/n"+"错误信息:"+ex.Message;
    }

    #endregion
    return Json(_response);
}

 

2 条留言  访客:1 条  博主:0 条   引用: 1 条

  1. 789

    :evil: :evil: :evil: :evil: :evil: :evil: :evil: :evil: :evil: :evil: :evil: 上传图片时候,控制器要返回的是路径?

来自外部的引用: 1 条

  • ASP.NET MVC使用Layui 上传图片/文件到阿里OSS | 落雨信息

给我留言

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: