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 相关文章推荐
css transform 3D幻灯片特效实现步骤解读
Mar 27 Javascript
offsetHeight在OnLoad中获取为0的现象
Jul 22 Javascript
jquery垂直公告滚动实现代码
Dec 08 Javascript
跟我学习javascript创建对象(类)的8种方法
Nov 20 Javascript
jQuery移动web开发中的页面初始化与加载事件
Dec 03 Javascript
基于javascript实现样式清新图片轮播特效
Mar 30 Javascript
jQuery简单实现页面元素置顶时悬浮效果示例
Aug 01 Javascript
浅谈jquery设置和获得checkbox选中的问题
Aug 19 Javascript
JS返回只包含数字类型的数组实例分析
Dec 16 Javascript
Vue.js实现列表清单的操作方法
Nov 15 Javascript
在小程序/mpvue中使用flyio发起网络请求的方法
Sep 13 Javascript
JQuery实现折叠式菜单的详细代码
Jun 03 jQuery
为你的微信小程序体积瘦身详解
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获取301跳转URL简单实例
2013/12/16 PHP
Codeigniter操作数据库表的优化写法总结
2014/06/12 PHP
PHP的运行机制与原理(底层)
2015/11/16 PHP
PHP入门教程之上传文件实例详解
2016/09/11 PHP
php中让人头疼的浮点数运算分析
2016/10/10 PHP
PHP实现原生态图片上传封装类方法
2016/11/08 PHP
PHP使用finfo_file()函数检测上传图片类型的实现方法
2017/04/18 PHP
jQuery 扩展对input的一些操作方法
2009/10/30 Javascript
使用jquery插件实现图片延迟加载技术详细说明
2011/03/12 Javascript
jquery判断元素是否隐藏的多种方法
2014/05/06 Javascript
js中的caller和callee属性介绍和例子
2014/06/07 Javascript
20个实用的JavaScript技巧分享
2014/11/28 Javascript
浅谈jquery点击label触发2次的问题
2016/06/12 Javascript
jQuery ajax调用后台aspx后台文件的两种常见方法(不是ashx)
2016/06/28 Javascript
深入浅析JavaScript函数前面的加号和叹号
2016/07/09 Javascript
Ajax使用原生态JS验证用户名是否存在
2020/05/26 Javascript
微信小程序 前端源码逻辑和工作流详解
2016/10/08 Javascript
根据输入邮箱号跳转到相应登录地址的解决方法
2016/12/13 Javascript
vue.js实现数据动态响应 Vue.set的简单应用
2017/06/15 Javascript
Vue CLI 2.x搭建vue(目录最全分析)
2019/02/27 Javascript
vue watch监控对象的简单方法示例
2021/01/07 Vue.js
Python 基础知识之字符串处理
2017/01/06 Python
Python开发虚拟环境使用virtualenvwrapper的搭建步骤教程图解
2018/09/19 Python
浅谈优化Django ORM中的性能问题
2020/07/09 Python
Selenium 安装和简单使用的实现
2020/12/04 Python
css3之UI元素状态伪类选择器实例演示
2017/08/11 HTML / CSS
味多美官网:蛋糕订购,100%使用天然奶油
2017/11/10 全球购物
香港中原电器网上商店:Chung Yuen
2019/06/26 全球购物
自荐信如何“自荐”
2013/10/24 职场文书
大学生学习生活的自我评价
2013/11/01 职场文书
廉政教育心得体会
2014/01/01 职场文书
医科大学毕业生自荐信
2014/02/03 职场文书
詹天佑教学反思
2014/04/30 职场文书
计划生育诚信协议书
2014/11/02 职场文书
贪污检举信范文
2015/03/02 职场文书
golang正则之命名分组方式
2021/04/25 Golang