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 相关文章推荐
js对文章内容进行分页示例代码
Mar 05 Javascript
node.js中的path.join方法使用说明
Dec 08 Javascript
七夕情人节丘比特射箭小游戏
Aug 20 Javascript
js实现类似菜单风格的TAB选项卡效果代码
Aug 28 Javascript
AngularJS基础 ng-if 指令用法
Aug 01 Javascript
AngularJs ng-route路由详解及实例代码
Sep 14 Javascript
JS实现微信弹出搜索框 多条件查询功能
Dec 13 Javascript
Bootstrap导航条鼠标悬停下拉菜单
Jan 04 Javascript
HTML5+JS+JQuery+ECharts实现异步加载问题
Dec 16 jQuery
深入浅析Vue.js计算属性和侦听器
May 05 Javascript
详解关于html,css,js三者的加载顺序问题
Apr 10 Javascript
jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作示例
Jun 02 jQuery
为你的微信小程序体积瘦身详解
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 程序员也要学会使用“异常”
2009/06/16 PHP
ECMall支持SSL连接邮件服务器的配置方法详解
2014/05/19 PHP
php常用hash加密函数
2014/11/22 PHP
PHP编程基本语法快速入门手册
2016/01/07 PHP
PHP共享内存使用与信号控制实例分析
2018/05/09 PHP
PHP实现负载均衡session共享redis缓存操作示例
2018/08/22 PHP
微信小程序 wxapp导航 navigator详解
2016/10/31 Javascript
jQuery实现自动调用和触发某个事件的方法
2016/11/18 Javascript
详解VUE中v-bind的基本用法
2017/07/13 Javascript
Angular4学习笔记之实现绑定和分包
2017/08/01 Javascript
浅谈vue引入css,less遇到的坑和解决方法
2018/01/20 Javascript
vue组件中的数据传递方法
2018/05/14 Javascript
详解vue添加删除元素的方法
2018/06/30 Javascript
layui实现table加载的示例代码
2018/08/14 Javascript
angular2组件中定时刷新并清除定时器的实例讲解
2018/08/31 Javascript
vue监听浏览器原生返回按钮,进行路由转跳操作
2020/09/09 Javascript
[52:00]2018DOTA2亚洲邀请赛 4.1 小组赛 A组加赛 LGD vs Optic
2018/04/02 DOTA
python网络编程学习笔记(七):HTML和XHTML解析(HTMLParser、BeautifulSoup)
2014/06/09 Python
Python多线程下载文件的方法
2015/07/10 Python
Python中方法链的使用方法
2016/02/23 Python
python控制windows剪贴板,向剪贴板中写入图片的实例
2018/05/31 Python
Python实现简易过滤删除数字的方法小结
2019/01/09 Python
浅谈Pycharm中的Python Console与Terminal
2019/01/17 Python
virtualenv介绍及简明教程
2020/06/23 Python
13个Pandas实用技巧,助你提高开发效率
2020/08/19 Python
CSS3 旋转立方体问题详解
2020/01/09 HTML / CSS
波兰最大的儿童服装连锁店之一:5.10.15.
2018/02/11 全球购物
戴尔美国官方折扣店:Dell Outlet
2018/02/13 全球购物
荷兰在线啤酒店:Beerwulf
2019/08/26 全球购物
加拿大留学自荐信
2014/01/28 职场文书
大专生自荐书范文
2014/06/22 职场文书
出差报告怎么写
2014/11/06 职场文书
小学生表扬稿范文
2015/05/05 职场文书
2016教师校本培训心得体会
2016/01/08 职场文书
基于python实现银行管理系统
2021/04/20 Python
vue选项卡切换的实现案例
2022/04/11 Vue.js