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 关闭浏览器 (不弹出提示框)
Jan 31 Javascript
jQuery load方法用法集锦
Dec 06 Javascript
JavaScript获取DOM元素的11种方法总结
Apr 25 Javascript
js获得当前系统日期时间的方法
May 06 Javascript
浅析四种常见的Javascript声明循环变量的书写方式
Oct 14 Javascript
JavaScript的React框架中的JSX语法学习入门教程
Mar 05 Javascript
AngularJS入门教程之AngularJS指令
Apr 18 Javascript
浅谈js的异步执行
Oct 18 Javascript
Ajax高级笔记 JavaScript高级程序设计笔记
Jun 22 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【圆形情况】
Dec 13 Javascript
JQuery事件委托原理与用法实例分析
May 13 jQuery
layui实现把数据表格时间戳转换为时间格式的例子
Sep 12 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
如何将一个表单同时提交到两个地方处理
2006/10/09 PHP
php学习笔记 php中面向对象三大特性之一[封装性]的应用
2011/06/13 PHP
php检测useragent版本示例
2014/03/24 PHP
PHP中开启gzip压缩的2种方法
2015/01/31 PHP
PHP获取文件夹内文件数的方法
2015/03/12 PHP
弹出模态框modal的实现方法及实例
2017/09/19 PHP
PHP实现的多进程控制demo示例
2019/07/22 PHP
Javascript String.replace的妙用
2009/09/08 Javascript
jquery 简单导航实现代码
2009/09/11 Javascript
javascript实现查找数组中最大值方法汇总
2016/02/13 Javascript
JS动态给对象添加事件的简单方法
2016/07/19 Javascript
js注入 黑客之路必备!
2016/09/14 Javascript
JavaScript reduce和reduceRight详解
2016/10/24 Javascript
js与jQuery实现的用户注册协议倒计时功能实例【三种方法】
2017/11/09 jQuery
浅谈Vue.js中ref ($refs)用法举例总结
2017/12/19 Javascript
使用async-validator编写Form组件的方法
2018/01/10 Javascript
Vue-Router2.X多种路由实现方式总结
2018/02/09 Javascript
Python操作列表的常用方法分享
2014/02/13 Python
python xml.etree.ElementTree遍历xml所有节点实例详解
2016/12/04 Python
python中闭包Closure函数作为返回值的方法示例
2017/12/17 Python
对numpy数据写入文件的方法讲解
2018/07/09 Python
python config文件的读写操作示例
2019/09/27 Python
Python3.9又更新了:dict内置新功能
2020/02/28 Python
对python中list的五种查找方法说明
2020/07/13 Python
Python如何对齐字符串
2020/07/30 Python
PyTorch中Tensor的数据类型和运算的使用
2020/09/03 Python
html5使用canvas画三角形
2014/12/15 HTML / CSS
HTML5全屏(Fullscreen)API详细介绍
2015/04/24 HTML / CSS
建筑实习自我鉴定
2013/10/18 职场文书
化学教学随笔感言
2014/02/19 职场文书
公司营业员的自我评价
2014/03/04 职场文书
《路旁的橡树》教学反思
2014/04/07 职场文书
父亲节寄语大全
2015/02/27 职场文书
2015年大学班长个人工作总结
2015/04/24 职场文书
python 管理系统实现mysql交互的示例代码
2021/12/06 Python
mysql中DCL常用的用户和权限控制
2022/03/31 MySQL