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 相关文章推荐
jQuery 在光标定位的地方插入文字的插件
May 10 Javascript
js禁止document element对象选中文本实现代码
Mar 21 Javascript
JQuery中的html()、text()、val()区别示例介绍
Sep 01 Javascript
JavaScript Function函数类型介绍
Apr 08 Javascript
jQuery中使用each处理json数据
Apr 23 Javascript
JavaScript中getUTCSeconds()方法的使用详解
Jun 11 Javascript
深入剖析javascript中的exec与match方法
May 18 Javascript
JS+Canvas 实现下雨下雪效果
May 18 Javascript
jQuery用户头像裁剪插件cropbox.js使用详解
Jun 07 jQuery
javascript对HTML字符转义与反转义
Dec 13 Javascript
vue+webpack 更换主题N种方案优劣分析
Oct 28 Javascript
微信小程序自定义弹出层效果
May 26 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
php基于str_pad实现卡号不足位数自动补0的方法
2014/11/12 PHP
PHP中使用Imagick实现各种图片效果实例
2015/01/21 PHP
学习php设计模式 php实现工厂模式(factory)
2015/12/07 PHP
基于PHP实现解密或加密Cloudflar邮箱保护
2020/06/24 PHP
说说掌握JavaScript语言的思想前提想学习js的朋友可以看看
2009/04/01 Javascript
asp.net+jquery滚动滚动条加载数据的下拉控件
2010/06/25 Javascript
利用JQuery和JS实现奇偶行背景颜色自定义效果
2012/11/19 Javascript
JavaScript instanceof 的使用方法示例介绍
2013/10/23 Javascript
js对象内部访问this修饰的成员函数示例
2014/04/27 Javascript
js 去除字符串第一位逗号的方法
2014/06/07 Javascript
jQuery实现自定义下拉列表
2015/01/05 Javascript
js实现jquery的offset()方法实例
2015/01/10 Javascript
基于jQuery实现搜索关键字自动匹配功能
2020/03/26 Javascript
js实现放大镜特效
2017/05/18 Javascript
详解vue跨组件通信的几种方法
2017/06/15 Javascript
从零开始最小实现react服务器渲染详解
2018/01/26 Javascript
angular4+百分比进度显示插件用法示例
2019/05/05 Javascript
[53:21]2014 DOTA2国际邀请赛中国区预选赛5.21 DT VS LGD-CDEC
2014/05/22 DOTA
Python实现判断给定列表是否有重复元素的方法
2018/04/11 Python
python代码实现逻辑回归logistic原理
2019/08/07 Python
Python pandas库中的isnull()详解
2019/12/26 Python
Python中return函数返回值实例用法
2020/11/19 Python
Python学习之time模块的基本使用
2021/01/17 Python
阿里健康大药房:阿里自营网上药店
2017/08/01 全球购物
教师党性分析材料
2014/02/04 职场文书
教师求职自荐信
2014/03/09 职场文书
公开服务承诺制度
2014/03/26 职场文书
物流专业自荐信
2014/05/23 职场文书
关于青春的演讲稿500字
2014/08/22 职场文书
治庸问责心得体会
2014/09/12 职场文书
股东合作协议书
2014/09/12 职场文书
2014年房产经纪人工作总结
2014/12/08 职场文书
2014年便民服务中心工作总结
2014/12/20 职场文书
党员廉洁自律个人总结
2015/02/13 职场文书
毕业实习单位意见
2015/06/04 职场文书
八月迷情观后感
2015/06/11 职场文书