layui上传图片列表展示_layui表单与上传图片

该博客演示了如何利用layui框架实现图片上传功能,包括上传后在页面上显示图片,并提供了表单提交示例。用户上传图片后,图片路径会显示在预览区域,点击提交按钮,数据将通过Ajax发送到指定API进行处理。
摘要由CSDN通过智能技术生成

@{

Layout = null;

}

Add

头像

上传图片

用户名

密码

性别

爱好

描述

立即提交

layui.use('upload', function () {

var upload = layui.upload;

var uploadInst = upload.render({

elem: "#test1",

url: "https://localhost:44304/api/Upload/Post",

done: function (res)

{

console.log(res);

layui.$("#test2").attr('src', 'https://localhost:44304' + res.data.src);

layui.$("#test2").attr('value','https://localhost:44304'+ res.data.src);

alert('上传成功');

},

error: function ()

{

}

})

})

layui.use('form',function () {

var form = layui.form;

form.on('submit(formDemo)', function (data) {

console.log(data);

$.ajax({

url: "https://localhost:44304/api/userinfos/Post",

data: data.field,

type:"Post",

success: function () {

alert('成功');

location.href = '/UserInfoS/Index';

}

})

return false;

}

)

})

原文链接:https://www.cnblogs.com/ly-03-04/p/12321599.html

本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值