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 判断 enter 事件
Feb 12 Javascript
Jquery下的26个实用小技巧(jQuery tips, tricks &amp; solutions)
Mar 01 Javascript
jQuery表单验证插件formValidator(改进版)
Feb 03 Javascript
jquery捕捉回车键及获取checkbox值与异步请求的方法
Dec 24 Javascript
JavaScript 数组中最大最小值
Jun 05 Javascript
详解JSON1:使用TSQL查询数据和更新JSON数据
Nov 21 Javascript
Bootstrap列表组学习使用
Feb 09 Javascript
JS实现复选框的全选和批量删除功能
Apr 05 Javascript
vue.js如何将echarts封装为组件一键使用详解
Oct 10 Javascript
element UI upload组件上传附件格式限制方法
Sep 04 Javascript
Vue 中使用lodash对事件进行防抖和节流操作
Jul 26 Javascript
了不起的11个JavaScript代码重构最佳实践小结
Jan 11 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
在PHP3中实现SESSION的功能(二)
2006/10/09 PHP
php项目打包方法
2008/02/18 PHP
php数组合并array_merge()函数使用注意事项
2014/06/19 PHP
深入浅析PHP7.0新特征(五大新特征)
2015/10/29 PHP
THINKPHP-Apache服务器中使用Alias虚拟目录URL重写 隐藏index.php
2021/03/09 PHP
Javascript注入技巧
2007/06/22 Javascript
Js保留小数点的4种效果实现代码分享
2014/04/12 Javascript
jQuery实现文本展开收缩特效
2015/06/03 Javascript
JS实现的3D拖拽翻页效果代码
2015/10/31 Javascript
微信小程序 表单Form实例详解(附源码)
2016/12/22 Javascript
js数字计算 误差问题的快速解决方法
2017/02/28 Javascript
在node中如何使用 ES6
2017/04/22 Javascript
jquery ui sortable拖拽后保存位置
2017/04/27 jQuery
详解vue2.0脚手架的webpack 配置文件分析
2017/05/27 Javascript
jQuery实现广告条滚动效果
2017/08/22 jQuery
67 个节约开发时间的前端开发者的工具、库和资源
2017/09/12 Javascript
Vue Element使用icon图标教程详解(第三方)
2018/02/07 Javascript
JS中promise化微信小程序api
2018/04/12 Javascript
VUE前后端学习tab写法实例
2019/08/06 Javascript
jQuery+ajax实现文件上传功能
2020/12/22 jQuery
[31:29]完美世界DOTA2联赛PWL S3 INK ICE vs Magma 第一场 12.20
2020/12/23 DOTA
浅谈Pycharm中的Python Console与Terminal
2019/01/17 Python
python的依赖管理的实现
2019/05/14 Python
python和js交互调用的方法
2020/06/23 Python
公认8个效率最高的爬虫框架
2020/07/28 Python
日本AOKI官方商城:AOKI西装
2020/06/11 全球购物
比较基础的php面试题及答案-编程题
2012/10/14 面试题
一套VC试题
2015/01/23 面试题
凌阳科技股份有限公司C++程序员面试题笔试题
2014/11/20 面试题
安全检查管理制度
2014/02/02 职场文书
中药专业毕业自荐书范文
2014/02/08 职场文书
大学军训感言800字
2014/02/27 职场文书
职称评定自我鉴定
2014/03/18 职场文书
《故都的秋》教学反思
2014/04/15 职场文书
骨干教师培训方案
2014/05/06 职场文书
青年文明号汇报材料
2014/12/23 职场文书