layui图片上传至数据库,修改操作时仍可见作为默认值

layui图片上传至数据库,修改操作时仍可见作为默认值

layui的文件上传采用的是异步上传的原理,具体见layui官方文档layui.com。
但我在练习过程中遇到了一些问题,比如后台怎么接受、前端怎样展示上次关闭session时候的图片等等,发现layui的图片处理还是比较灵活的。代码太多不可能一一复制,但核心都摆在这里了。


@Controller
@RequestMapping("headline/upload")
public class HeadlineUploadController {
    @RequestMapping("uploadModule")
    @ResponseBody
    public LayuiJson getGridInfo_tree(HttpServletRequest request) {

        LayuiJson json = new LayuiJson();
        String dirname="Module";
        List<Map<String, String>> lkh_uploadFile = FileUtils.lkh_uploadFile(request, dirname);
        json.setSuccess(true);
        json.setData(lkh_uploadFile);
        return json;
    }
}
@RequestMapping("update")
    @ResponseBody
    public LayuiJson update(Headline dd) {

        LayuiJson json = new LayuiJson();
        if (headlineService.update(dd)) {
            json.setSuccess(true);
            json.setMsg("保存成功");
        }
        return json;
    }
<div class="layui-form-item" style="display: flex;">
      <label class="layui-form-label">头条封面</label>
      <button type="button" class="layui-btn" id="data_img">
        <i class="layui-icon">&#xe67c;</i>上传封面
      </button>
      <script type="text/html" template lay-done="layui.data.uploadParams(d.params)">
        <input type="hidden" name="headline_cover" id="headline_cover" value="">
        <div id="icon_data_div" style="margin-left:50px;"></div>
      </script>

    </div>
<script>
$(function(){
	layui.use(['upload','layer'],function () {
	    var upload = layui.upload,layer = layui.layer;
	    var form=layui.form;
	       //自定义验证
		form.verify({
		    number_new: function(value, item){ //value:表单的值、item:表单的DOM对象
		      if(value<0){
		        return '不能小于0';
		      }
		    }
		});	
		//普通图片上传
      layui.data.uploadParams = function (params) {
        var headline_cover=params.headline_cover;
        $("#icon_data_div").html("<img height='90px' width='160px' src='"+headline_cover+"'>")
        var uploadInst = upload.render({
          elem: '#data_img',//绑定的元素
          url: 'headline/upload/uploadModule?access_token='+layui.data('layuiAdmin').access_token,
          //data: {access_token: layui.data('layuiAdmin').access_token},
          auto:true,//是否自动上传
          accept:"images",//指定允许上传的文件类型
          multiple:true,//支持多文件上传
          size: 1024*20,
          done: function(res, index, upload){ //假设code=0代表上传成功
            if(isObjNotEmpty(res.data)){
              if(res.data.length>0){
                $("#headline_cover").val(res.data[0].fileurl);
                $("#icon_data_div").html("<img height='90px' width='160px' src='"+res.data[0].fileurl+"'>");
              }
            }
          }

        });
          console.log(1)
        console.log(params.headline_cover);

      };

	});
})
</script>
data_update:function(){
			var checkStatus = table.checkStatus('lay_data_list');
			var data = checkStatus.data;
			if(data.length==1){
			}else{
				layer.msg("请选中一条数据进行修改!");
				return;
			}
			admin.popup({
				title: '修改组织机构'
				,area: ['550px', '550px']
				,id: 'LAY-data-update'
				,success: function(layero, index){
					view(this.id).render('headline/headline_update',data[0]).done(function(){
						form.render(null, 'layuiadmin-data-update-list');
						//监听提交
						form.on('submit(layuiadmin-data-update-submit)', function(data){
							var field = data.field; //获取提交的字段
							admin.req({
								url:'headline/update',
								data:field,
								type:'post',
								success:function(data){
									if(data.success){
										layer.msg("保存成功!");
										layer.close(index); //执行关闭
										table.reload('lay_data_list');
									}else{
										layer.msg(data.msg);
									}
								},error:function(){
									layer.close(index); //执行关闭
								}
							});

						});
					});
				}
			});
		}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值