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 smipleChart 简单图标类
Jan 12 Javascript
将两个div左右并列显示并实现点击标题切换内容
Oct 22 Javascript
jQuery禁用快捷键例如禁用F5刷新 禁用右键菜单等的简单实现
Aug 31 Javascript
jQuery Ajax使用FormData对象上传文件的方法
Sep 07 Javascript
vue2实现移动端上传、预览、压缩图片解决拍照旋转问题
Apr 13 Javascript
Vue内容分发slot(全面解析)
Aug 19 Javascript
javascript高级模块化require.js的具体使用方法
Oct 31 Javascript
使用vue根据状态添加列表数据和删除列表数据的实例
Sep 29 Javascript
微信小程序如何播放腾讯视频的实现
Sep 20 Javascript
vue之a-table中实现清空选中的数据
Nov 07 Javascript
11个Javascript小技巧帮你提升代码质量(小结)
Dec 28 Javascript
手写Vue源码之数据劫持示例详解
Jan 04 Vue.js
为你的微信小程序体积瘦身详解
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获取数组最后一个值的2种方法
2015/01/21 PHP
详解cookie验证的php应用的一种SSO解决办法
2017/10/20 PHP
Jquery取得iframe下内容的方法
2013/11/18 Javascript
jquery鼠标放上去显示悬浮层即弹出定位的div层
2014/04/25 Javascript
node.js中的fs.lchownSync方法使用说明
2014/12/16 Javascript
AngularJS基础 ng-class-odd 指令示例
2016/08/01 Javascript
再谈javascript常见错误及解决方法
2016/09/16 Javascript
js仿搜狐视频记录片列表展示效果
2020/05/30 Javascript
详解VueJS 数据驱动和依赖追踪分析
2017/07/26 Javascript
3种vue组件的书写形式
2017/11/29 Javascript
vue中eslintrc.js配置最详细介绍
2018/12/21 Javascript
vue组件中watch props根据v-if动态判断并挂载DOM的问题
2019/05/12 Javascript
使用Vue-cli 中为单独页面设置背景图片铺满全屏
2020/07/17 Javascript
openlayers实现图标拖动获取坐标
2020/09/25 Javascript
原生JS实现拖拽功能
2020/12/16 Javascript
跟老齐学Python之画圈还不简单吗?
2014/09/20 Python
在Python中操作文件之read()方法的使用教程
2015/05/24 Python
python用模块zlib压缩与解压字符串和文件的方法
2016/12/16 Python
python的dataframe和matrix的互换方法
2018/04/11 Python
简单瞅瞅Python vars()内置函数的实现
2019/09/27 Python
python 中的paramiko模块简介及安装过程
2020/02/29 Python
Python多进程multiprocessing、进程池用法实例分析
2020/03/24 Python
详解pycharm配置python解释器的问题
2020/10/15 Python
详解Python中的Lock和Rlock
2021/01/26 Python
pytest fixtures装饰器的使用和如何控制用例的执行顺序
2021/01/28 Python
Keras保存模型并载入模型继续训练的实现
2021/02/20 Python
浅析与CSS3的loading动画加载相关的transition优化
2015/05/18 HTML / CSS
美国儿童运动鞋和服装零售商:Kids Foot Locker
2017/08/05 全球购物
美国开幕式潮店:Opening Ceremony
2018/02/10 全球购物
Eagle Eyes Optics鹰眼光学:高性能太阳镜
2018/12/07 全球购物
物理分数没达标检讨书
2014/09/13 职场文书
“学党章、守党纪、讲党规”学习心得体会
2016/01/14 职场文书
如何书写读后感?(附范文)
2019/07/26 职场文书
接触艺术对孩子学习思维有益
2019/08/06 职场文书
Python数据分析之pandas函数详解
2021/04/21 Python
Python天气语音播报小助手
2021/09/25 Python