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 讲讲思路:在一份添加表单中,我们有个图片上传的模块,然后我 ... 
随机推荐
- 断电操作导致的jboss项目部署失败------从早上九点一直到下午4点才解决
			虚拟机jboss可以连接成功,项目也可以正常编译成功.但是,去访问backstop网址的时候,就是,显示,无法访问该网站.访问9990的jboss服务器时,也是显示无法访问该网站. 项目代码是没问题的 ... 
- Java之封装特性
			Java中的三大特性:继承,封装,多态: 其中封装概念:封装是把过程和数据包围起来,对数据的访问只能通过已定义的接口. 面向对象计算始于这个基本概念,即现实世界可以被描绘成一系列完全自治.封装的 对象 ... 
- SpringMVC 配置式开发-BeanNameUrlHandlerMapping(七)
			第一种处理器映射器BeanNameUrlHandlerMapping.class(注册器映射器 bean节点的class属性中用到的,这种方式dean id属性必须要以“/”开头) 第二种处理器映射 ... 
- C#校验算法列举
			以下是工作中常用的几种校验算法,后期将不断更新 和校验 /// <summary> /// CS和校验 /// </summary> /// <param name=&q ... 
- 转【C#调用DLL的几种方法,包括C#调用C\C++\C#DLL】
			C#中dll调用方法 一. DLL与应用程序 动态链接库(也称为DLL,即为“Dynamic Link Library”的缩写)是Microsoft Windows最重要的组成要素之一, ... 
- shell脚本实现自动保留最近n次备份记录
			项目中出现的问题 某天上午服务器出现卡顿特别严重,页面加载速度奇慢,并且某些页面刷新出现404的问题,就连服务器的tab命令的自动提示都出现了问题,楼主费了九牛二虎之力,根据服务器排查发现,服务器数据 ... 
- 洛谷 P2447 [SDOI2010]外星千足虫
			P2447 [SDOI2010]外星千足虫 题目描述 公元2089年6月4日,在经历了17年零3个月的漫长旅行后,“格纳格鲁一号”载人火箭返回舱终于安全着陆.此枚火箭由美国国家航空航天局(NASA)研 ... 
- SEVERE: One or more listeners failed to start.
			Full details will be found in the appropriate container log file 错误日志在/home/dela/.IntelliJIdea2017.1 ... 
- Python项目完成
			今天,来对之前自学python做的一个小任务进行复习和总结,首先回顾之前任务的每一个步骤,按照自己个人的思路,一布一步往下做 需求:根据主网站,爬取出大连市各年地区生产总值,观察2010至2015年的 ... 
- P1592 互质
			题意:输入两个正整数n和k,求与n互质的第k个正整数. $n≤10^6,k≤10^8$ 可以枚举出互质的数,居然发现,有循环节.... 比如10 与其互质的1 3 7 9 11 13 17 ... 
