<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. 什么是DMZ、DMZ端口、DMZ主机?

    DMZ是英文“demilitarized zone”的缩写,中文名称为“隔离区”,也称“非军事化区”.它是为了解决安装防火墙后外部网络不能访问内部网络服务器的问题,而设立的一个非安全系统与安全系统之间 ...

  2. 《Maven实战》笔记-7-持续集成

    一.持续集成的步骤: 1.持续编译 2.持续数据库集成 3.持续测试 4.持续审查 5.持续部署 6.持续反馈   二.持续集成工具——Hudson 1.安装Hudson 2.准备Subversion ...

  3. 21天网站建设实录 (雨辰资讯) 高清pdf扫描版​

    <21天网站建设实录>以网页设计师的项目开发为背景,以“阿里里在线购物”商业网站的开发过程为流程,通过21天的任务期限,以一天一项任务.一天掌握一项技能项目实战的学习模式,全面讲解了一个网 ...

  4. Chrom去掉"未选择任何文件"

    <style> input[type="file"] { color: transparent; } </style>

  5. 动态变更Repeater控件HeaderTemplate列名

    本博文,Insus.NET教你动态实现变更Repeater控件HeaderTemplate列名.一般情况之下,是不需要动态变更,只有动态有Repeater控件不变情况之下,来显示多种数据源进行绑定.这 ...

  6. python3如何打印进度条

    Python3 中打印进度条(#)信息: 代码: import sys,time for i in range(50): sys.stdout.write("#") sys.std ...

  7. iOS开发--OC常见报错

    1.解决RegexKitLite导入报错问题 2.The working copy "Test" failed to commit files.问题解决

  8. LAMP之Apache

    Apache是世界使用排名第一的Web服务器软件.它可以运行在几乎所有广泛使用的计算机平台上,由于其跨平台和安全性被广泛使用,是最流行的Web服务器端软件之一.快速.可靠并且可通过简单的API扩充,将 ...

  9. Luogu1829 JZPTAB

    JZPTAB 求\(\sum_{i=1}^n\sum_{j=1}^mlcm(i,j)\) \(=\sum_{i=1}^n\sum_{j=1}^m\frac{ij}{\gcd(i,j)}\) 枚举gcd ...

  10. 5分钟构建无服务器敏感词过滤后端系统(基于FunctionGraph)

    摘要:开发者通过函数工作流,无需配置和管理服务器,以无服务器的方式构建应用,便能开发出一个弹性高可用的后端系统.托管函数具备以毫秒级弹性伸缩.免运维.高可靠的方式运行,极大地提高了开发和运维效率,减小 ...