<link rel="stylesheet" href="layui/css/layui.css">
<script src="js/jquery.min.1.11.3.js"></script>
<script src="layui/layui.js"></script> <button type="button" class="layui-btn" id="test1">
<i class="layui-icon"></i>上传图片
</button> <button type="button" class="layui-btn" id="uploadPic">
<i class="layui-icon"></i>上传图片2
</button> <script>
;(function(){
//定义构造函数
var Upfile = function(ele,opt){
this.defaults = {
//elem:'#uploadPic' //绑定元素
elem:$(ele) //绑定元素
,url:'http://localhost:8080/demo/import' //上传接口
,method:'post'
,done:function(res){
console.log(JSON.stringify(res));
}
,error:function(res){
//上传失败
console.log(JSON.stringify(res));
}
}
this.options = $.extend({}, this.defaults ,opt);
}; //定义方法
Upfile.prototype = {
init:function(){
var _this = this;
return layui.use('upload',function(){
var upload = layui.upload; //执行实例
var uploadInst = upload.render(_this.options);
});
}
}; //在插件中使用对象
$.fn.upfile = function(options){
var upfile = new Upfile(this,options);
return upfile.init();
}
})(); //上传
$('#uploadPic').upfile({
done:function(res){
console.log(111);
}
});
$('#test1').upfile(); </script>

  

layui upload封装的更多相关文章

  1. layui upload 后台获取不到值

    后台获取不到值方法一: <script> layui.use('upload', function () { var upload = layui.upload; //执行实例 var u ...

  2. [开源] 基于Layui组件封装的后台模版,HG-Layui-UI通用后台管理框架V1.0版

    HG框架简介 HG-Layui-UI框架,是基于layui最新版UI搭建的一套通用后台管理框架,借鉴了市面上各大主流框架风格,采用iframe标签页实现,保留了传统开发模式的简单实用性. 为快速开发减 ...

  3. PHP系列 | Thinkphp3.2 上传七牛 bad token 问题 [ layui.upload 图片/文件上传]

    前端代码 <div class="logo_out" id="upload-logo"></div> JS代码 /** * 上传图片 * ...

  4. layui upload 在JS动态加载内容后, 点击按钮无反应

    /** * 根据用户选择的不同规格选项 * 返回 不同的输入框选项 */ function ajaxGetSpecInput2(spec_arr) { var goods_id = $('#goods ...

  5. 给 layui upload 带每个文件的进度条, .net 后台代码

    1.upload.js 扩展 功能利用ajax的xhr属性实现该功能修改过modules中的upload.js文件功能具体实现:在js文件中添加监听函数 //创建监听函数 var xhrOnProgr ...

  6. layui小封装方法

    //打开加载动画function LayerLoad() { layui.use('layer', function () { var layer = layui.layer; layer.load( ...

  7. layui(六)——upload组件常见用法总结

    layui中提供了非常简单的文件上传组件,这里写了一个上传图片的栗子,上传成功后返回图片在服务器的路径,并设置为页面中img的src属性.因为上传十分简单,没什么可说的,就直接上代码了. html代码 ...

  8. LayUI后台管理与综合示例

    一.LayUI介绍 layui(谐音:类UI) 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用.其外在极简,却又不失饱满的内在,体 ...

  9. 利用layui的load模块解决图片上传

    首先肯定要参考layui官网的upload模块文档:http://www.layui.com/doc/modules/upload.html 讲讲思路:在一份添加表单中,我们有个图片上传的模块,然后我 ...

随机推荐

  1. 转换流 Properties集合 序列化 工具

    今日内容介绍1.转换流2.缓冲流3.Properties集合4.序列化流与反序列化流5.commons-IO============================================== ...

  2. VS2012,更新补丁后--创建项目未找到与约束匹配的导出

    更新过一次漏洞,后来尝试建立一个项目,结果错误终于暴露了,创建项目时无法成功创建,而且提示:未找到与约束ontractNameMicrosoft.VisualStudio.Text.ITextDocu ...

  3. 非阻塞socket与epoll

    阻塞socket. –阻塞调用是指调用结果返回之前,当前线程会被挂起.函数只有在得到结果之后才会返回. –对于文件操作read,fread函数调用会将线程阻塞. –对于socket,accept与re ...

  4. c#设计模式-单例模式【转】

    单例模式三种写法: 第一种最简单,但没有考虑线程安全,在多线程时可能会出问题 public class Singleton { private static Singleton _instance = ...

  5. 基于C#局域网语音聊天

    基​于​C​#​局​域​网​语​音​聊​天​室​,​可​实​现​文​本​消​息​的​发​送​.​接​收​及​语​音​聊​天​,​是​一​个​很​不​错​的​,​适​合​初​学​者​的​软​件​开​发​ ...

  6. day03-Linux操作系统目录结构

    一. Linux系统目录表示        ‘/’表示根目录:                                                            ‘.’表示当前目录 ...

  7. Python中的map_reduce

      原教程地址: map/reduce-廖雪峰   将数值型字符串转换成数值,解释map, reduce的使用: #!/usr/bin/env python #-*- coding:utf-8 -*- ...

  8. DP【洛谷P1704】 寻找最优美做题曲线

    [洛谷P1704] 寻找最优美做题曲线 题目背景 nodgd是一个喜欢写程序的同学,前不久(好像还是有点久了)洛谷OJ横空出世,nodgd同学当然第一时间来到洛谷OJ刷题.于是发生了一系列有趣的事情, ...

  9. Java内存区域与内存溢出异常---对象的内存布局和对象的访问定位

    对象的内存布局   在HotSpot虚拟机中,对象在内存中的存储布局可以划分为三个区域:对象头,实例数据,对齐填充.   对象头包括两部分信息:第一部分用于存储对象自身的运行时数据,如哈希码,GC分代 ...

  10. 论文阅读笔记五十六:(ExtremeNet)Bottom-up Object Detection by Grouping Extreme and Center Points(CVPR2019)

    论文原址:https://arxiv.org/abs/1901.08043 github: https://github.com/xingyizhou/ExtremeNet 摘要 本文利用一个关键点检 ...