layui文件上传实现代码


Posted in Javascript onMay 20, 2017

本文实例为大家分享了layui文件上传的具体代码,供大家参考,具体内容如下

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>文件上传</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <link rel="stylesheet" href="css/global.css">
  </head>
  <body>
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
      <legend>设定上传文件的格式</legend>
    </fieldset>

    <input type="file" name="file" class="layui-upload-file"> 
    <input type="file" name="file1" lay-type="file" class="layui-upload-file"> 
    <input type="file" name="file1" lay-type="audio" class="layui-upload-file"> 
    <input type="file" name="file2" lay-type="video" class="layui-upload-file"> 
    <blockquote class="layui-elem-quote" style="margin-top: 20px;">支持拖动文件上传</blockquote>

    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
      <legend>演示上传</legend>
    </fieldset>
    <div class="site-demo-upload">
      <img id="LAY_demo_upload" src="layui/images/tong.jpg">
      <div class="site-demo-upbar">
        <input type="file" name="file" class="layui-upload-file" id="test">
      </div>
    </div>

    <p style="margin-top: 20px;">注:由于服务器资源有限,所以此处每次给你返回的是同一张图片</p>

    <script src="layui/layui.js"></script>
    <script>
      layui.use('upload', function(){
        layui.upload({
        url: '' //上传接口
        ,success: function(res){ //上传成功后的回调
          console.log(res)
         }
      });

      layui.upload({
        url: '/test/upload.json'
        ,elem: '#test' //指定原始元素,默认直接查找class="layui-upload-file"
        ,method: 'get' //上传接口的http类型
        ,success: function(res){
          LAY_demo_upload.src = res.url;
        }
      });

      });
    </script>
  </body>
</html>

官网文件上传

layui文件上传实现代码

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript循环变量注册dom事件 之强大的闭包
Sep 08 Javascript
js实现收缩菜单效果实例代码
Oct 30 Javascript
html dom节点操作(获取/修改/添加或删除)
Jan 23 Javascript
教你如何自定义百度分享插件以及bshare分享插件的分享按钮
Jun 20 Javascript
JQuery创建DOM节点的方法
Jun 11 Javascript
JS实现超简单的仿QQ折叠菜单效果
Sep 21 Javascript
jquery过滤特殊字符',防sql注入的实现方法
Aug 17 Javascript
URL中“#” “?” &amp;“”号的作用浅析
Feb 04 Javascript
详解Angular中的自定义服务Service、Provider以及Factory
Apr 22 Javascript
微信公众号平台接口开发 获取access_token过程解析
Aug 14 Javascript
js防抖函数和节流函数使用场景和实现区别示例分析
Apr 11 Javascript
浅谈vue项目利用Hbuilder打包成APP流程,以及遇到的坑
Sep 12 Javascript
为你的微信小程序体积瘦身详解
May 20 #Javascript
jquery.guide.js新版上线操作向导镂空提示jQuery插件(推荐)
May 20 #jQuery
使用node.js搭建服务器
May 20 #Javascript
layui表格实现代码
May 20 #Javascript
微信小程序新增的拖动组件movable-view使用教程
May 20 #Javascript
JS jQuery使用正则表达式去空字符的简单实现代码
May 20 #jQuery
深入理解Angularjs中$http.post与$.post
May 19 #Javascript
You might like
上海永华YH-R296(华普R-96)12波段立体声收音机的分析和打理
2021/03/02 无线电
纯php打造的tab选项卡效果代码(不用js)
2010/12/29 PHP
php array_unique之后json_encode需要注意
2011/01/02 PHP
Drupal7中常用的数据库操作实例
2014/03/02 PHP
PHP连接sftp并下载文件的方法教程
2018/08/26 PHP
PHP defined()函数的使用图文详解
2019/07/20 PHP
服务端 VBScript 与 JScript 几个相同特性的写法 By shawl.qiu
2007/03/06 Javascript
在IE上直接编辑网页内容的js代码(IE地址栏js)
2009/04/27 Javascript
用js实现计算加载页面所用的时间
2010/04/02 Javascript
json数据与字符串的相互转化示例
2013/09/18 Javascript
js实现两个值相加alert出来精确到指定位
2013/09/25 Javascript
Bootstrap导航条的使用和理解3
2016/12/14 Javascript
基于vue2.0+vuex的日期选择组件功能实现
2017/03/13 Javascript
nodejs入门教程六:express模块用法示例
2017/04/24 NodeJs
深入浅析ES6 Class 中的 super 关键字
2017/10/20 Javascript
Vue 项目代理设置的优化
2018/04/17 Javascript
bootstrap中日历范围选择插件daterangepicker的使用详解
2018/04/17 Javascript
微信小程序实现炫酷的弹出式菜单特效
2019/01/28 Javascript
使用flow来规范javascript的变量类型
2019/09/12 Javascript
layuiAdmin循环遍历展示商品图片列表的方法
2019/09/16 Javascript
JavaScript中的this/call/apply/bind的使用及区别
2020/03/06 Javascript
Django使用Celery异步任务队列的使用
2018/03/13 Python
CentOS 7 安装python3.7.1的方法及注意事项
2018/11/01 Python
pandas重新生成索引的方法
2018/11/06 Python
python 中pyqt5 树节点点击实现多窗口切换问题
2019/07/04 Python
Python3 实现减少可调用对象的参数个数
2019/12/20 Python
dpn网络的pytorch实现方式
2020/01/14 Python
使用matplotlib的pyplot模块绘图的实现示例
2020/07/12 Python
一文解决django 2.2与mysql兼容性问题
2020/07/15 Python
详解Python openpyxl库的基本应用
2021/02/26 Python
世界上最好的儿童品牌:AlexandAlexa
2018/01/27 全球购物
Kate Spade澳大利亚官方网站:美国设计师手袋品牌
2019/09/10 全球购物
数字天堂软件测试面试题
2012/12/23 面试题
义务教育学校标准化建设汇报材料
2014/08/16 职场文书
学习新党章心得体会2016
2016/01/15 职场文书
特别篇动画《总之就是非常可爱 ~制服~》PV公开,2022年夏季播出
2022/04/04 日漫