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传中文参数controller里获取参数乱码问题解决方法
Jan 03 Javascript
new Date()问题在ie8下面的处理方法
Jul 31 Javascript
JS仿JQuery选择器功能
Mar 08 Javascript
Vue.js实战之组件的进阶
Apr 04 Javascript
详解基于webpack2.x的vue2.x的多页面站点
Aug 21 Javascript
Node.js 使用流实现读写同步边读边写功能
Sep 11 Javascript
Node.js学习之TCP/IP数据通讯(实例讲解)
Oct 11 Javascript
jquery学习笔记之无new构建详解
Dec 07 jQuery
利用JavaScript将Excel转换为JSON示例代码
Jun 14 Javascript
基于vue+echarts 数据可视化大屏展示的方法示例
Mar 09 Javascript
vue根据条件不同显示不同按钮的操作
Aug 04 Javascript
JavaScript实现简单拖拽效果
Sep 15 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/08/02 PHP
最新版本PHP 7 vs HHVM 多角度比较
2016/02/14 PHP
Laravel 之url参数,获取路由参数的例子
2019/10/21 PHP
Package.js  现代化的JavaScript项目make工具
2012/05/23 Javascript
js拦截alert对话框另类应用
2013/01/16 Javascript
js 表单提交后按钮变灰的实例代码
2013/08/16 Javascript
javascript自定义的addClass()方法
2014/05/28 Javascript
jQuery EasyUI datagrid实现本地分页的方法
2015/02/13 Javascript
jQuery中使用each处理json数据
2015/04/23 Javascript
javascript实现在指定元素中垂直水平居中
2015/09/13 Javascript
Bootstrap笔记—折叠实例代码
2017/03/13 Javascript
angular $watch 一个变量的变化(实例讲解)
2017/08/02 Javascript
分析JS中this引发的bug
2017/12/12 Javascript
Vue2.0 v-for filter列表过滤功能的实现
2018/09/07 Javascript
vue+webpack中配置ESLint
2018/11/07 Javascript
关于angular浏览器兼容性问题的解决方案
2020/07/26 Javascript
[03:23]我的刀塔你不可能这么可爱 第一期金萌萌的故事
2014/06/20 DOTA
github配置使用指南
2014/11/18 Python
python实现分析apache和nginx日志文件并输出访客ip列表的方法
2015/04/04 Python
介绍Python中的文档测试模块
2015/04/28 Python
python创建和删除目录的方法
2015/04/29 Python
Python求算数平方根和约数的方法汇总
2016/03/09 Python
Python for Informatics 第11章之正则表达式(四)
2016/04/21 Python
python中urllib.unquote乱码的原因与解决方法
2017/04/24 Python
pyqt5自定义信号实例解析
2018/01/31 Python
Python 串口读写的实现方法
2019/06/12 Python
pycharm new project变成灰色的解决方法
2019/06/27 Python
wxPython绘图模块wxPyPlot实现数据可视化
2019/11/19 Python
Python Web静态服务器非堵塞模式实现方法示例
2019/11/21 Python
python爬虫模块URL管理器模块用法解析
2020/02/03 Python
手把手教你配置JupyterLab 环境的实现
2021/02/02 Python
印度购买眼镜和太阳镜网站:Coolwinks
2018/09/26 全球购物
大学校庆邀请函
2014/01/11 职场文书
绿化先进工作者事迹材料
2014/01/30 职场文书
音乐节策划方案
2014/06/09 职场文书
应届大学生自荐书
2014/06/17 职场文书