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模拟页面加载进度条的实现代码
Dec 19 Javascript
JavaScript将字符串转换为整数的方法
Apr 14 Javascript
详解angularjs 关于ui-router分层使用
Jun 12 Javascript
bootstrap select下拉搜索插件使用方法详解
Nov 23 Javascript
vue中element组件样式修改无效的解决方法
Feb 03 Javascript
vue项目中axios使用详解
Feb 07 Javascript
bootstrap中selectpicker下拉框使用方法实例
Mar 22 Javascript
Angular异步变同步处理方法
Aug 13 Javascript
详解Vue底部导航栏组件
May 02 Javascript
微信小程序实现横向滚动导航栏效果
Dec 12 Javascript
详解关于Vue单元测试的几个坑
Apr 26 Javascript
国庆节到了,利用JS实现一个生成国庆风头像的小工具 详解实现过程
Oct 05 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和ACCESS写聊天室(六)
2006/10/09 PHP
PHP安全配置
2006/12/06 PHP
php 无法加载mcrypt.dll的解决办法
2013/04/03 PHP
PHP5.5基于mysqli连接MySQL数据库和读取数据操作实例详解
2019/02/16 PHP
基于jquery点击自以外任意处,关闭自身的代码
2012/02/10 Javascript
javascript中有趣的反柯里化深入分析
2012/12/05 Javascript
js 使FORM表单的所有元素不可编辑的示例代码
2013/10/17 Javascript
使用原生js写的一个简单slider
2014/04/29 Javascript
原生javaScript实现图片延时加载的方法
2014/12/22 Javascript
javascript中日期函数new Date()的浏览器兼容性问题
2015/09/05 Javascript
js添加绑定事件的方法
2016/05/15 Javascript
微信小程序-横向滑动scroll-view隐藏滚动条
2017/04/20 Javascript
基于jQuery Ajax实现下拉框无刷新联动
2017/12/06 jQuery
jQuery实现下拉菜单动态添加数据点击滑出收起其他功能
2018/06/14 jQuery
详解element-ui表格中勾选checkbox,高亮当前行
2019/09/02 Javascript
ES6使用 Array.includes 处理多重条件用法实例分析
2020/03/02 Javascript
[01:27]DOTA2电竞之夜 今夜共饮庆功酒
2014/08/02 DOTA
python实现多进程代码示例
2018/10/31 Python
python使用PyQt5的简单方法
2019/02/27 Python
python-tkinter之按钮的使用,开关方法
2019/06/11 Python
Python如何执行精确的浮点数运算
2020/07/31 Python
jupyter 添加不同内核的操作
2021/02/06 Python
介绍一下write命令
2012/09/24 面试题
金融专业应届生求职信
2013/11/02 职场文书
师生聚会感言
2014/01/26 职场文书
《守株待兔》教学反思
2014/03/01 职场文书
《会走路的树》教后反思
2014/04/19 职场文书
酒店开业庆典策划方案
2014/05/28 职场文书
2014年学生会生活部工作总结
2014/11/07 职场文书
小学生作文批改评语
2014/12/25 职场文书
2015教师年度思想工作总结
2015/04/30 职场文书
2016元旦晚会主持词开场白和结束语
2015/12/04 职场文书
2016年学校安全教育月活动总结
2016/04/06 职场文书
一文搞懂redux在react中的初步用法
2021/06/09 Javascript
总结Python变量的相关知识
2021/06/28 Python
使用logback实现按自己的需求打印日志到自定义的文件里
2021/08/30 Java/Android