layui upload封装
<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封装的更多相关文章
- layui upload 后台获取不到值
后台获取不到值方法一: <script> layui.use('upload', function () { var upload = layui.upload; //执行实例 var u ...
- [开源] 基于Layui组件封装的后台模版,HG-Layui-UI通用后台管理框架V1.0版
HG框架简介 HG-Layui-UI框架,是基于layui最新版UI搭建的一套通用后台管理框架,借鉴了市面上各大主流框架风格,采用iframe标签页实现,保留了传统开发模式的简单实用性. 为快速开发减 ...
- PHP系列 | Thinkphp3.2 上传七牛 bad token 问题 [ layui.upload 图片/文件上传]
前端代码 <div class="logo_out" id="upload-logo"></div> JS代码 /** * 上传图片 * ...
- layui upload 在JS动态加载内容后, 点击按钮无反应
/** * 根据用户选择的不同规格选项 * 返回 不同的输入框选项 */ function ajaxGetSpecInput2(spec_arr) { var goods_id = $('#goods ...
- 给 layui upload 带每个文件的进度条, .net 后台代码
1.upload.js 扩展 功能利用ajax的xhr属性实现该功能修改过modules中的upload.js文件功能具体实现:在js文件中添加监听函数 //创建监听函数 var xhrOnProgr ...
- layui小封装方法
//打开加载动画function LayerLoad() { layui.use('layer', function () { var layer = layui.layer; layer.load( ...
- layui(六)——upload组件常见用法总结
layui中提供了非常简单的文件上传组件,这里写了一个上传图片的栗子,上传成功后返回图片在服务器的路径,并设置为页面中img的src属性.因为上传十分简单,没什么可说的,就直接上代码了. html代码 ...
- LayUI后台管理与综合示例
一.LayUI介绍 layui(谐音:类UI) 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用.其外在极简,却又不失饱满的内在,体 ...
- 利用layui的load模块解决图片上传
首先肯定要参考layui官网的upload模块文档:http://www.layui.com/doc/modules/upload.html 讲讲思路:在一份添加表单中,我们有个图片上传的模块,然后我 ...
随机推荐
- eclipse中jad反编译工具的安装
我的云盘:工具里面有 Q:为什么有必要在开发环境中配置反编译工具呢? A: 当运行引用了第三方jar包项目时,突然报出了jar包中的某个类的某一行出现异常.我们想看一下这个class文件的代码时,经 ...
- IDEA内嵌Jetty启动SpringMvc项目
这段时间本意是想要研究一下Netty的多线程异步NIO通讯框架,看完原理想要做下源码分析.查找资料发现Jetty框架底层支持用Netty做web请求的多线程分发处理,于是就筹备着将Jetty框架内嵌到 ...
- [译]Javascript中的错误信息处理(Error handling)
本文翻译youtube上的up主kudvenkat的javascript tutorial播放单 源地址在此: https://www.youtube.com/watch?v=PMsVM7rjupU& ...
- 原型模式与serializable
写原型模式时课件上有一个实现模式是利用可串行化接口实现,然后就发现那个代码(如下),串行化接口里面没有函数,这种接口被曾为标记接口,implements这个接口后就可以对其进行各种流操作了,其实就是O ...
- 基于DEV控件库的webservice打印.repx模板
本文使用的DEV版本为10.1版本 首先需要添加Dll引用 DevExpress.Data.v10.1 DevExpress.XtraPrinting.v10.1 DevExpress.XtraRep ...
- 写RestApi需要注意些什么?
PS1="\n[\e[32;1m]([\e[37;1m]\u[\e[32;1m])-([\e[37;1m]jobs:\j[\e[32;1m])-([\e[37;1m]\w[\e[32;1m] ...
- 算法训练 Balloons in a Box (枚举,模拟)
问题描述 你要写一个程序,使得能够模拟在长方体的盒子里放置球形的气球. 接下来是模拟的方案.假设你已知一个长方体的盒子和一个点集.每一个点代表一个可以放置气球的位置.在一个点上放置一个气球,就是以这个 ...
- 【bzoj2190】: [SDOI2008]仪仗队 数论-欧拉函数
[bzoj2190]: [SDOI2008]仪仗队 在第i行当且仅当gcd(i,j)=1 可以被看到 欧拉函数求和 没了 /* http://www.cnblogs.com/karl07/ */ #i ...
- xPath在C#中运用
<?xml version="1.0" encoding="utf-8" ?> <pets> <cat color=" ...
- P2117 小Z的矩阵
题意: 给你一个初始01矩阵 三种操作 1.给一个x,把第x行01互换 2.给一个x,把第x列01互换 3.求$(\sum_{i=1}^n\sum_{j=1}^nf[i][j]*f[j][i])%2$ ...