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 表格插件整理
Apr 27 Javascript
js中更短的 Array 类型转换
Oct 30 Javascript
js中的hasOwnProperty和isPrototypeOf方法使用实例
Jun 06 Javascript
javascript快速排序算法详解
Sep 17 Javascript
微信小程序 教程之wxapp视图容器 swiper
Oct 19 Javascript
Easyui笔记2:实现datagrid多行删除的示例代码
Jan 14 Javascript
vue中用动态组件实现选项卡切换效果
Mar 25 Javascript
Vue工程模板文件 webpack打包配置方法
Dec 26 Javascript
在Angular中使用JWT认证方法示例
Sep 10 Javascript
vue-cli 3.x 配置Axios(proxyTable)跨域代理方法
Sep 19 Javascript
微信小程序自定义底部导航带跳转功能
Nov 27 Javascript
vue cli使用融云实现聊天功能的实例代码
Apr 19 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
虹吸壶煮咖啡26个注意事项
2021/03/03 冲泡冲煮
zf框架的校验器InArray使用示例
2014/03/13 PHP
微信公众平台开发关注及取消关注事件的方法
2014/12/23 PHP
PHP微信API接口类
2016/08/22 PHP
自己的js工具 Cookie 封装
2009/08/21 Javascript
JavaScript加入收藏夹功能(兼容IE、firefox、chrome)
2014/05/05 Javascript
javascript数组随机排序实例分析
2015/07/22 Javascript
javascript跨域的方法汇总
2015/10/23 Javascript
一起学写js Calender日历控件
2016/04/14 Javascript
基于原生JS实现图片裁剪
2016/08/01 Javascript
关于Vue.js 2.0的Vuex 2.0 你需要更新的知识库
2016/11/30 Javascript
微信小程序 flex实现导航实例详解
2017/04/26 Javascript
微信小程序之发送短信倒计时功能
2017/08/30 Javascript
layer.open 按钮的点击事件关闭方法
2018/08/17 Javascript
原生js实现碰撞检测
2020/03/12 Javascript
javascript实现前端input密码输入强度验证
2020/06/24 Javascript
angular共享依赖的解决方案分享
2020/10/15 Javascript
vue监听滚动事件的方法
2020/12/21 Vue.js
[06:16]DOTA2守卫传承者——职业选手谈心路历程
2015/02/26 DOTA
python连接sql server乱码的解决方法
2013/01/28 Python
Python实现的直接插入排序算法示例
2018/04/29 Python
numpy返回array中元素的index方法
2018/06/27 Python
Pandas分组与排序的实现
2019/07/23 Python
Python 的 __str__ 和 __repr__ 方法对比
2020/09/02 Python
python爬虫使用scrapy注意事项
2020/11/23 Python
乌克兰的第一家手表店:Deka
2020/03/05 全球购物
汽车运用工程专业毕业生推荐信
2013/12/25 职场文书
电台实习生求职信
2014/02/25 职场文书
新闻传媒系求职信范文
2014/04/19 职场文书
我们的节日清明节活动总结
2014/04/30 职场文书
中学学校门卫岗位职责
2014/08/15 职场文书
公司行政助理岗位职责
2015/04/11 职场文书
企业财务人员岗位职责
2015/04/14 职场文书
金陵十三钗观后感
2015/06/04 职场文书
政审证明范文
2015/06/19 职场文书
python 模块重载的五种方法
2021/04/24 Python