前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >layui的文件上传跟文件保存

layui的文件上传跟文件保存

作者头像
await
发布2021-11-17 10:10:26
2.4K0
发布2021-11-17 10:10:26
举报
文章被收录于专栏:await

{tabs-pane label="layui前段写法"} 选取的文件进行预加载并展示,根据表单提交后进行数据文件保存操作,图片文件存在当前项目的目录下

HTML页面内容

代码语言:javascript
复制
@*图片名称*@
      <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 JS 写法

代码语言:javascript
复制
 //图片处理上产
 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="后台接收"}

后台文件接收保存写法 layui返回需要JSON数据,所以使用JSON数据返回

代码语言:javascript
复制
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分钟

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • HTML页面内容
  • layui JS 写法
  • 后台文件接收保存写法 layui返回需要JSON数据,所以使用JSON数据返回
相关产品与服务
图片处理
图片处理(Image Processing,IP)是由腾讯云数据万象提供的丰富的图片处理服务,广泛应用于腾讯内部各产品。支持对腾讯云对象存储 COS 或第三方源的图片进行处理,提供基础处理能力(图片裁剪、转格式、缩放、打水印等)、图片瘦身能力(Guetzli 压缩、AVIF 转码压缩)、盲水印版权保护能力,同时支持先进的图像 AI 功能(图像增强、图像标签、图像评分、图像修复、商品抠图等),满足多种业务场景下的图片处理需求。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档