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 相关文章推荐
解决Extjs 4 Panel作为Window组件的子组件时出现双重边框问题
Jan 11 Javascript
jquery点击页面任何区域实现鼠标焦点十字效果
Jun 21 Javascript
jQuery打印图片pdf、txt示例代码
Jul 22 Javascript
浅析AngularJS中的生命周期和延迟处理
Jun 18 Javascript
jQuery对html元素的取值与赋值实例详解
Dec 18 Javascript
js解决movebox移动问题
Mar 29 Javascript
js实现String.Fomat的实例代码
Sep 02 Javascript
javaScript中封装的各种写法示例(推荐)
Jul 03 Javascript
vue router 配置路由的方法
Jul 26 Javascript
解决angularjs WdatePicker ng-model的问题
Sep 13 Javascript
JavaScript面向对象中接口实现方法详解
Jul 24 Javascript
解决vue中使用proxy配置不同端口和ip接口问题
Aug 14 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中利用explode函数分割字符串到数组
2014/02/08 PHP
Symfony2联合查询实现方法
2016/03/18 PHP
Laravel Memcached缓存驱动的配置与应用方法分析
2016/10/08 PHP
浅谈关于PHP解决图片无损压缩的问题
2017/09/01 PHP
PHP实现的多维数组排序算法分析
2018/02/10 PHP
url地址自动加#号问题说明
2010/08/21 Javascript
jQuery下通过$.browser来判断浏览器.
2011/04/05 Javascript
jquery slibings选取同级其他元素的实现代码
2013/11/15 Javascript
js charAt的使用示例
2014/02/18 Javascript
详解nodejs 文本操作模块-fs模块(五)
2016/12/23 NodeJs
利用angularjs1.4制作的简易滑动门效果
2017/02/28 Javascript
Angular.JS中的this指向详解
2017/05/17 Javascript
在React中如何优雅的处理事件响应详解
2017/07/24 Javascript
C#实现将一个字符转换为整数
2017/12/12 Javascript
微信小程序适配iphoneX的实现方法
2018/09/18 Javascript
记录一次开发微信网页分享的步骤
2019/05/07 Javascript
Layui表格行工具事件与数据回填方法
2019/09/13 Javascript
electron 安装,调试,打包的具体使用
2019/11/06 Javascript
JS addEventListener()和attachEvent()方法实现注册事件
2021/01/11 Javascript
Python简明入门教程
2015/08/04 Python
Python基于sftp及rsa密匙实现远程拷贝文件的方法
2016/09/21 Python
Python面向对象程序设计类变量与成员变量、类方法与成员方法用法分析
2019/04/12 Python
详解Numpy中的数组拼接、合并操作(concatenate, append, stack, hstack, vstack, r_, c_等)
2019/05/27 Python
Python Selenium参数配置方法解析
2020/01/19 Python
django 数据库返回queryset实现封装为字典
2020/05/19 Python
浅谈keras中的keras.utils.to_categorical用法
2020/07/02 Python
6号汽车旅馆预订:Motel 6
2018/02/11 全球购物
serialVersionUID具有什么样的特征
2014/02/20 面试题
比较一下entity bean和session bean
2013/12/27 面试题
小学教师学期末自我评价
2013/09/25 职场文书
护理专业毕业生自我鉴定
2013/10/08 职场文书
毕业生的自我评价
2013/12/30 职场文书
珍珠鸟教学反思
2014/02/01 职场文书
遗失说明具结保证书
2015/02/26 职场文书
干部理论学习心得体会
2016/01/21 职场文书
nginx反向代理配置去除前缀案例教程
2021/07/26 Servers