fsLayuiPlugin 是一个基于layui的快速开发插件,支持数据表格增删改查操作,提供通用的组件,通过配置html实现数据请求,减少前端js重复开发的工作。
GitHub下载 码云下载
测试环境地址:http://fslayui.itcto.cn

附件上传基于 form表单操作 ,请先参考form表单 fsLayuiPlugin数据表格弹出form表单使用说明

上传配置

上传附件需要配置一个input输入框和buttion按钮
通过选择按钮弹出上传窗口
上传接口url地址需要在 fsConfig.js 中配置,点击进入

<div class="layui-form-item layui-form-text">
<label class="layui-form-label">附件</label>
<div class="layui-input-inline">
<input type="text" id="filePath" name="filePath" autocomplete="off" disabled="disabled" class="layui-input"/>
</div>
<div class="layui-input-inline">
<button type="button" class="layui-btn" function="upload" fileElem="#filePath" fileAccept="file" fileExts="" fileSize="1024" inputs="type:test">上传图片</button>
</div>
</div>

buttion属性配置
详细配置可以参考官方配置 http://www.layui.com/doc/modules/upload.html#options

属性 必输 默认值 名称 描述
function 是 方法名称 上传必须写 upload
fileElem 是 指向容器选择器 如:elem: '#id'。也可以是DOM对象,主要上传成功后,填充上传后的地址
fileAccept 否 images 指定允许上传的文件类型 可选值有:images(图片)、file(所有文件)、video(视频)、audio(音频)
fileExts 否 允许上传的文件后缀 一般结合 accept 参数类设定。假设 accept 为 file 类型时,那么你设置 exts: 'zip|rar|7z' 即代表只允许上传压缩格式的文件。如果 accept 未设定,那么限制的就是图片的文件格式
fileSize 否 0 设置文件最大可允许上传的大小 单位 KB。不支持ie8/9,默认不限制
inputs 否 参数 自定义需要传入的参数

inputs参数说明
此属性主要为了传参

  1. 把当前选中的行id传入请求,可以配置 id:
  2. 传入固定的指,可以配置 属性:值 ,示例: state:1
  3. 传入的参数取某一个输入框的值,可以配置 属性:#输入框id ,示例:name:#name
  4. 需要传多个参数直接通过 逗号 分割,示例: id:,state:1

效果图

本文首发于我的博客:ITCTO技术博客

fsLayuiPlugin附件上传使用说明的更多相关文章

  1. asp.net结合uploadify实现多附件上传

    1.说明 uploadify是一款优秀jQuery插件,主要功能是批量上传文件.大多数同学对多附件上传感到棘手,现将asp.net结合uploadfiy如何实现批量上传附件给大家讲解一下,有什么不对的 ...

  2. ueditor调用其中的附件上传功能

    ueditor实际上是集成了webuploader, 在做内容发布的时候想既有ueditor又有单独的附件上传按钮,这时再加载一个webuploader就显得过于臃肿了,单独利用ueditor的上传功 ...

  3. 基于MVC4+EasyUI的Web开发框架形成之旅--附件上传组件uploadify的使用

    大概一年前,我还在用Asp.NET开发一些行业管理系统的时候,就曾经使用这个组件作为文件的上传操作,在随笔<Web开发中的文件上传组件uploadify的使用>中可以看到,Asp.NET中 ...

  4. 百度在线编辑器UEditor(v1.3.6) .net环境下详细配置教程之更改图片和附件上传路径

    本文是接上一篇博客,如果有疑问请先阅读上一篇:百度在线编辑器UEditor(v1.3.6) .net环境下详细配置教程 默认UEditor上传图片的路径是,编辑器包目录里面的net目录下 下面就演示如 ...

  5. tp中附件上传文件,表单提交

    public function tianjia(){ $goods=D('Goods'); if(!empty($_POST)){ if($_FILES['f_goods_image']['error ...

  6. 使用plupload做一个类似qq邮箱附件上传的效果

    公司项目中使用的框架是springmvc+hibernate+spring,目前需要做一个类似qq邮箱附件上传的功能,暂时只是上传小类型的附件 处理过程和解决方案都需要添加附件,处理过程和解决方案都可 ...

  7. Dynamic CRM 2013学习笔记(十三)附件上传 / 上传附件

    上传附件可能是CRM里比较常用的一个需求了,本文将介绍如何在CRM里实现附件的上传.显示及下载.包括以下几个步骤: 附件上传的web页面 附件显示及下载的附件实体 调用上传web页面的JS文件 实体上 ...

  8. playframework中多附件上传注意事项

    playframework中多附件上传注意事项 2013年09月24日 play 暂无评论 //play版本问题 经确认,1.0.3.2版本下控制器中方法参数  List<File> fi ...

  9. JS实现多附件上传(asp.net)

    前几天,用户提出一个需求-多附件上传,另外,每个上传文件要加一个别名,本人创新少,从网上收集了资料,稍微改写,满足了 客户的需求.在应用到程序之前,先做了个小测试,测试通过,小高兴,就记录下了这个小测 ...

随机推荐

  1. eclipse复制工作空间配置步骤

    多个workspace,把每个workspace的设置共享,省去每次都重新配置一次. 总结一下,复制工作空间配置步骤如下: [最好是在新的workspace创建项目之前操作] 1 使用eclipse新 ...

  2. webpack最基本的使用方式

    1.创建文件夹"webpack-study" 2.使用webstrom打开文件夹所在位置.在根目录上创建一个文件,文件命名为“src”,在src文件下新建css.images.js ...

  3. SMTP命令

    SMTP(Simple Mail Transfer Protocol)简单邮件传输协议 Basic Commands: HELO(Hello):标识用户身份 MAIL FROM:发件人地址 RCPT ...

  4. 栈 · 有getMin功能的栈O(1)

    题面 实现一个特殊的栈,在实现栈的基本功能的基础上,再实现返回栈中的最小元素的操作. 要求 pop(), push(), getMin()时间复杂度都是O(1) 思路 1.准备两个栈,数据栈+最小元素 ...

  5. TCP三次握手过程中涉及的队列知识的学习

    先上一张图 (图片来源:http://www.cnxct.com/something-about-phpfpm-s-backlog/) 如上图所示,这里有两个队列:syns queue(半连接队列): ...

  6. mysql常用的存储引擎,MyISAM和InnoDB的对比

    Mysql有多种存储引擎,最常用的有MyISAM和InnoDB这两种,每一种类型的存储引擎都有自已的特点,可以结合项目中数据的使用场景来进行了哪种存储引擎合适. 1:查看mysql数据库支持的存储引擎 ...

  7. Computer Vision_33_SIFT:PCA-SIFT A More Distinctive Representation for Local Image Descriptors——2004

    此部分是计算机视觉部分,主要侧重在底层特征提取,视频分析,跟踪,目标检测和识别方面等方面.对于自己不太熟悉的领域比如摄像机标定和立体视觉,仅仅列出上google上引用次数比较多的文献.有一些刚刚出版的 ...

  8. DoD与TCP/IP

    DoD与TCP/IP都是协议栈. 什么是协议栈? 就是一套软件,默认安装完Windows就有,可以卸载再安装.把他卸载了,你就不能上网. 数据的封装以及解封装有网卡以及绑定的TCP/IP协议栈完成 A ...

  9. Web Api 创建及其使用

    由于创建博客,我需要尝试一些新的技术,新的思路,所以我没规规矩矩的写博客,用上了诸多以前没用的东西,比如现在这个(我只是听过web api 我连 web server 都只是用过两三次/手动滑稽) 昨 ...

  10. 7.MapReduce操作Hbase

    7 HBase的MapReduce   HBase中Table和Region的关系,有些类似HDFS中File和Block的关系.由于HBase提供了配套的与MapReduce进行交互的API如 Ta ...