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中的值类型和引用类型小结 文字说明与实例
Dec 12 Javascript
jQuery 自定义函数写法分享
Mar 30 Javascript
JQuery的Ajax请求实现局部刷新的简单实例
Feb 11 Javascript
基于javascript实现判断移动终端浏览器版本信息
Dec 09 Javascript
jQuery实现带有上下控制按钮的简单多行滚屏效果代码
Sep 04 Javascript
JS实现网页上随机产生超链接地址的方法
Nov 09 Javascript
jquery+php实现滚动的数字特效
Nov 29 Javascript
Bootstrap导航条学习使用(二)
Feb 08 Javascript
vue-cli之router基本使用方法详解
Oct 17 Javascript
高性能的javascript之加载顺序与执行原理篇
Jan 14 Javascript
layui select动态添加option的实例
Mar 07 Javascript
用vue写一个仿简书的轮播图的示例代码
Mar 13 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&amp;&amp;mysql)四
2006/10/09 PHP
zf框架的session会话周期及次数限制使用示例
2014/03/13 PHP
php_screw安装使用教程(另一个PHP代码加密实现)
2014/05/29 PHP
PHP使用mysql_fetch_object从查询结果中获取对象集的方法
2015/03/18 PHP
获取当前网页document.url location.href区别总结
2008/05/10 Javascript
自己的js工具 Event封装
2009/08/21 Javascript
JQuery模板插件 jquery.tmpl 动态ajax扩展
2011/11/10 Javascript
基于jquery的放大镜效果
2012/05/30 Javascript
javascript写的一个模拟阅读小说的程序
2014/04/04 Javascript
node.js中的fs.unlinkSync方法使用说明
2014/12/15 Javascript
js数组的操作指南
2014/12/28 Javascript
JavaScript中利用jQuery绑定事件的几种方式小结
2016/03/06 Javascript
Js操作DOM元素及获取浏览器高宽的简单方法
2016/09/08 Javascript
实例分析浏览器中“JavaScript解析器”的工作原理
2016/12/12 Javascript
Angular2开发——组件规划篇
2017/03/28 Javascript
Angular中自定义Debounce Click指令防止重复点击
2017/07/26 Javascript
vue服务端渲染页面缓存和组件缓存的实例详解
2018/09/18 Javascript
详解从react转职到vue开发的项目准备
2019/01/14 Javascript
记一次vue-webpack项目优化实践详解
2019/02/17 Javascript
python基于TCP实现的文件下载器功能案例
2019/12/10 Python
pyecharts动态轨迹图的实现示例
2020/04/17 Python
Python脚本打包成可执行文件过程解析
2020/10/20 Python
selenium携带cookies模拟登陆CSDN的实现
2021/01/19 Python
香港时尚女装购物网站:ZAFUL
2017/07/19 全球购物
什么是三层交换,说说和路由的区别在那里
2014/09/01 面试题
跟单文员的岗位职责
2013/11/14 职场文书
大学生校园创业计划书
2014/02/08 职场文书
学前教育专业求职信
2014/09/02 职场文书
交通安全横幅标语
2014/10/07 职场文书
2014年初三班主任工作总结
2014/12/05 职场文书
2015年班组长工作总结
2015/04/10 职场文书
幼儿园奖惩制度范本
2015/08/05 职场文书
护理心得体会范文
2016/01/22 职场文书
公司开业的祝贺语大全(60条)
2019/07/05 职场文书
你为什么是穷人?可能是这5个缺点造成
2019/07/11 职场文书
MySQL优化及索引解析
2022/03/17 MySQL