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快速上手:写jQuery与直接写JS的区别详细解析
Aug 26 Javascript
JavaScript模拟重力状态下抛物运动的方法
Mar 03 Javascript
JS+CSS实现电子商务网站导航模板效果代码
Sep 10 Javascript
jQuery倒计时代码(超简单)
Feb 27 Javascript
基于vue2框架的机器人自动回复mini-project实例代码
Jun 13 Javascript
jquery 实现拖动文件上传加载进度条功能
Mar 18 jQuery
vue使用v-for实现hover点击效果
Sep 29 Javascript
在vue中使用express-mock搭建mock服务的方法
Nov 07 Javascript
vue实现日历备忘录功能
Sep 24 Javascript
ES6中定义类和对象的方法示例
Jul 31 Javascript
vue@cli3项目模板怎么使用public目录下的静态文件
Jul 07 Javascript
uniapp开发小程序实现滑动页面控制元素的显示和隐藏效果
Dec 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加速 eAccelerator配置和使用指南
2009/06/05 PHP
PHP 将逗号、空格、回车分隔的字符串转换为数组的函数
2012/06/07 PHP
php+html5+ajax实现上传图片的方法
2016/05/14 PHP
如何优雅的使用 laravel 的 validator验证方法
2018/11/11 PHP
javascritp实现input输入框相关限制用法
2007/06/29 Javascript
纯js实现瀑布流展现照片(自动适应窗口大小)
2013/04/08 Javascript
js判断选择的时间是否大于今天的代码
2013/08/20 Javascript
js指定步长实现单方向匀速运动
2017/07/17 Javascript
jQuery EasyUI的TreeGrid查询功能实现方法
2017/08/08 jQuery
删除table表格行的实例讲解
2017/09/21 Javascript
浅谈vue首屏加载优化
2018/06/28 Javascript
vue 父组件给子组件传值子组件给父组件传值的实例代码
2019/04/15 Javascript
js实现右键弹出自定义菜单
2020/09/08 Javascript
解决Can't find variable: SockJS vue项目的问题
2020/09/22 Javascript
JS实现点击掉落特效
2021/01/29 Javascript
python调用cmd命令行制作刷博器
2014/01/13 Python
使用Python编写基于DHT协议的BT资源爬虫
2016/03/19 Python
python遍历目录的方法小结
2016/04/28 Python
老生常谈Python序列化和反序列化
2017/06/28 Python
Win8.1下安装Python3.6提示0x80240017错误的解决方法
2018/07/31 Python
Python实现截取PDF文件中的几页代码实例
2019/03/11 Python
使用批处理脚本自动生成并上传NuGet包(操作方法)
2019/11/19 Python
Python openpyxl模块原理及用法解析
2020/01/19 Python
如何用Python绘制3D柱形图
2020/09/16 Python
CSS3实现简易版的刮刮乐效果
2016/09/27 HTML / CSS
css3让div随鼠标移动而抖动起来
2014/02/10 HTML / CSS
英国最大的奢侈品零售网络商城:Flannels
2016/09/16 全球购物
Linux内核的同步机制是什么?主要有哪几种内核锁
2016/07/11 面试题
Unix里面如何在后台运行程序
2016/10/14 面试题
石油大学毕业生自荐信
2014/01/28 职场文书
闭幕式主持词
2014/04/02 职场文书
关于随地扔垃圾的检讨书
2014/09/30 职场文书
安全承诺书
2015/01/19 职场文书
给医院的感谢信
2015/01/21 职场文书
2016年庆祝六一儿童节活动总结
2016/04/06 职场文书
2019思想汇报范文
2019/05/21 职场文书