layui的文件上传功能怎么获取文件名

layui的文件上传功能怎么获取文件名

第一步在我们的电脑上面打开软件,新建一个html页面,并添加上layui插件的css,js文件和jquery.js文件,如下图所示:

1562810586(1).png

第二步在新建的index1.html文件里面首先引入layui.css,layui.js,jquery-1.9.0.js三个文件,如下图所示:

1562810598(1).png

第三步在index1.html的body里面添加一个表格、文件选择和文件上传的按钮,实现将文件上传到服务器,并以表格的形式显示到界面,显示文件名,文件大小等,如下图所示:

1562810613(1).png

第四步我们在浏览器中打开页面,可以看到文件上传列表的界面效果,如下图所示:

1562810625(1).png

相关推荐:《layui框架教程》

第五步我们开始给文件选择按钮和上传按钮添加事件,并将上传的文件信息返回到表格中,通过 obj.preview(function(index, file, result){});方法来读取选择的本地文件信息,file.name获取文件名,(file.size/1014).toFixed(1)获取文件大小,如下图所示:

1562810638(1).png

第六步点击上传文件按钮进行上传选择的文件,上传成功之后,通过var tr=demoListView.find(‘tr#upload-‘+ index),tds =tr.children();代码获取文件上传的信息,包括文件名,文件大小等插入到表格上,如下图所示:

1562810649(1).png

第七步我们在浏览器打开index1.html文件,可以看到多文件上传的界面样式,点击选择多文件,如下图所示:

1562810659(1).png

第八步我们选择本地的文件进行上传,点击打开,如下图所示:

1562810668(1).png

第九步可以看到已经成功上传文件到服务器,并获取文件名和文件大小显示在表格中,如下图所示:

1562810677(1).png

以上就是layui的文件上传功能怎么获取文件名的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/3006766.html

(0)
上一篇 2025年3月13日 01:14:43
下一篇 2025年3月3日 08:25:27

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • layui怎么设置checkbox勾选

    方法1 在返回的json中设置LAY_CHECKED为true,页面上的checkbox就是选中状态了。 data”:[    {“name”:”北京市”,”areaType”:”省/直辖市”,”id”:”110000″,”LAY_CHEC…

    2025年3月13日
    200
  • layui怎么对弹出层显示数据

    layui怎么对弹出层显示数据?下面给大家举个例子: 点击查看function func11() {  console.log($.cookie(“id”));  //iframe窗  layer.open({   type: 2,   t…

    2025年3月13日
    200
  • layui和easyui有什么区别

    layui layui是一款采用自身模块规范编写的前端 UI 框架,它遵循原生的 HTML/CSS/JS 书写方式。它虽然外在极简,但是内容丰富,里面包含众多组件从核心代码到 API 都非常适合界面的快速开发。事实上layui更多是面向于后…

    2025年3月13日
    200
  • layui表格怎么清空

    监听复选框事件: var checkedArr=[];table.on(‘checkbox(demo)’, function(obj){if (obj.type==’all’) 。 登录后复制 输入代码: return;if (obj.ch…

    2025年3月13日 编程技术
    200
  • layui怎么设置复选框

    首先需要引入layui的js脚本文件,和css样式文件。需要使用jquery的,也引入对应文件。 html里,我们写上对应的复选框控件,就是平时常用的checkbox。但这里需要注意的是checkbox要加一个title值,而且控件要放在样…

    2025年3月13日 编程技术
    200
  • layui有什么主要功能

    一、分页功能 layui框架分页使用,其实layui分页非常简单只需要传入一个总页数就可以很好运用这个功能。下面就看一下我对layui框架分页的介绍。 注意:传入的是页数不是数据库查询的条数 laypage的使用;  //界面容器     …

    2025年3月13日
    200
  • layui icon是什么

    字体图标 layui 的所有图标全部采用字体形式,取材于阿里巴巴矢量图标库(iconfont)。因此你可以把一个 icon 看作是一个普通的文字,这意味着你直接用 css 控制文字属性,如 color、font-size,就可以改变图标的颜…

    2025年3月13日 编程技术
    200
  • layui上传图片成功之后怎么预览成功的图片

    首先要会使用layui的写法,如图所示,提交之后有三个状态,一个上传中,一般文件大就会在这步显示,第三步就是报错,第二步是最主要的上传成功之后一系列的操作。 在控制器中自己写方法把获取到的图片传到服务器,之后判断一下是否成功上传,定义一些值…

    2025年3月13日 编程技术
    200
  • 使用layui怎么下载文件

    下载: a标签中的href属性可以直接给下载链接的地址,点击的时候会自动跳出下载保存窗口。 用原生上传文件标签上传文件,获取上传文件的全路径: $(‘#file’).change(function(){    $(‘#em’).text($…

    2025年3月13日
    200
  • layui怎么使用日期控件

    本文实例为大家分享了layui-日期控件的实现代码,供大家参考,具体内容如下: nbsp;html>     日期      目前Layui中的日期组件还是layDate 1.1的改良版,它后续将会进行一次重写。     登录后复制 …

    2025年3月13日
    200

发表回复

登录后才能评论