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控制上传文件的大小
Oct 26 Javascript
JavaScript监测ActiveX控件是否已经安装过的代码
Sep 02 Javascript
jQuery EasyUI中对表格进行编辑的实现代码
Jun 10 Javascript
Javascript继承机制的设计思想分享
Aug 28 Javascript
页面右下角弹出提示框示例代码js版
Aug 02 Javascript
javascript 获取iframe里页面中元素值的方法
Feb 17 Javascript
JS选项卡动态替换banner图片路径的方法
May 11 Javascript
JS从一组数据中找到指定的单条数据的方法
Jun 02 Javascript
微信小程序-getUserInfo回调的实例详解
Oct 27 Javascript
vue检测对象和数组的变化分析
Jun 30 Javascript
vue-resource请求实现http登录拦截或者路由拦截的方法
Jul 11 Javascript
JS实现放烟花效果
Mar 10 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 日,周,月点击排行统计
2012/01/11 PHP
ubuntu下配置nginx+php+mysql详解
2015/09/10 PHP
php模板引擎技术简单实现
2016/03/15 PHP
PHP全局变量与超级全局变量区别分析
2016/04/01 PHP
thinkphp5 migrate数据库迁移工具
2018/02/20 PHP
js实现简单模态窗口,背景灰显
2008/11/14 Javascript
javascript globalStorage类代码
2009/06/04 Javascript
javascript生成随机颜色示例代码
2014/05/05 Javascript
jquery中val()方法是从最后一个选项往前读取的
2015/09/06 Javascript
JS Array.slice 截取数组的实现方法
2016/01/02 Javascript
利用原生js和jQuery实现单选框的勾选和取消操作的方法
2016/09/04 Javascript
Angularjs实现mvvm式的选项卡示例代码
2016/09/08 Javascript
canvas实现手机端用来上传用户头像的代码
2016/10/20 Javascript
jQuery解析返回的xml和json方法详解
2017/01/05 Javascript
JavaScript中Math对象的方法介绍
2017/01/05 Javascript
js自制图片放大镜功能
2017/01/24 Javascript
原生JS仿QQ阅读点击展开、收起效果
2017/03/08 Javascript
JavaScript基本语法_动力节点Java学院整理
2017/06/26 Javascript
深入理解 ES6中的 Reflect用法
2020/07/18 Javascript
CentOS 8.2服务器上安装最新版Node.js的方法
2020/12/16 Javascript
[45:17]DOTA2-DPC中国联赛定级赛 Phoenix vs DLG BO3第三场 1月9日
2021/03/11 DOTA
深入理解Python分布式爬虫原理
2017/11/23 Python
Python中将dataframe转换为字典的实例
2018/04/13 Python
对python requests发送json格式数据的实例详解
2018/12/19 Python
Python在图片中插入大量文字并且自动换行
2019/01/02 Python
python读取txt文件并取其某一列数据的示例
2019/02/19 Python
django多对多表的创建,级联删除及手动创建第三张表
2019/07/25 Python
python隐藏类中属性的3种实现方法
2019/12/19 Python
Python实现发票自动校核微信机器人的方法
2020/05/22 Python
解决pycharm导入numpy包的和使用时报错:RuntimeError: The current Numpy installation (‘D:\\python3.6\\lib\\site-packa的问题
2020/12/08 Python
为什么需要版本控制?
2013/08/08 面试题
生产车间实习自我鉴定
2013/09/23 职场文书
中职生自我鉴定范文
2013/10/03 职场文书
个性与发展自我评价
2014/02/11 职场文书
学生鉴定评语大全
2014/05/05 职场文书
冬季施工防火方案
2014/05/17 职场文书