Ajaxupload简单使用

 友情提示:1、蓝色文字为必修改内容。2、#字符后面是解释该代码段的主要内容

 备注: 该实例是用php的ci框架直接接收图片并保存

1、 引用AjaxUpload.js文件

#public/js/ajaxupload.js ajaxupload插件的文件位置
<script tyep="text/javascript" src="public/js/ajaxupload.js"></script>

2、 创建页面并编写HTML

#upload 该id是必需的,但可以自定义

<button id="upload">上传图片</button>

3、 编写JS脚本

#upload 与第二步创建的button的id要相对应,必需对应

#<?php echo site_url("base/upload_pic") ?>  这里是服务器的url地址,不过这里是ci框架的。

#userfile 像是<input type="file" name="userfile" />这个input标签的name的值

#desc  该数据可以随图片一起上传到服务器,用post接收

#response  上传图片后,服务器返回的数据

            $(document).ready(function(){

                var button = $('#upload'), interval;

                var fileType = "all",fileNum = "one";

                new AjaxUpload(button,{

                    action: '<?php echo site_url("base/upload_pic") ?>',

                    name: 'userfile',

                    onSubmit : function(file, ext){

                        var desc = $("#pic_des").val();

                        this.setData({"des":desc});

                        button.text('文件上传中');

                        if(fileNum == 'one')

                            this.disable();

                        interval = window.setInterval(function(){

                            var text = button.text();

                            if (text.length < 14){

                                button.text(text + '.');                   

                            } else {

                                button.text('文件上传中');            

                            }

                        }, 200);

                    },                   

                    onComplete: function(file, response ){

                            button.text('文件上传');

                            window.clearInterval(interval);

                            this.enable();

                            data = eval("("+response+")");

                    }

                });

            });

4、 创建php(ci框架)处理程序

#$this->upload->do_upload()  用ci框架接收图片,也可用原生态的php接收,或者其他框架

#echo 0  向客户端返回数据

#echo 1  向客户端返回数据

                  public function upload_pic(){
$this->load->library("upload", $config);
if (!$this->upload->do_upload()){
echo 0;
                }else{
echo 1;
                 }
}
 

Ajaxupload插件超级简单使用(php的ci框架)的更多相关文章

  1. vcastr2.0插件超级简单使用

                Vcastr2.0简单使用 友情提示:1.蓝色文字为必修改内容.2.#字符后面是解释该代码段的主要内容 1. 引用swfobject.js文件 #public/videoplu ...

  2. jquery超级简单的后台系统自适应框架

    系统后台自适应简单框架 <!DOCTYPE HTML> <html lang="zh-CN"> <head> <meta http-equ ...

  3. Notyf - 超级简单、响应式的 JS 通知插件

    通知是网站的常用功能之一,可以用来显示消息.通告.提示等等.Notyf 是一款超级简单.响应式的 JS 通知插件,不依赖 jQuery 库,可以独立使用.赶紧试用一下吧! 在线演示      免费下载 ...

  4. 【CI3.1】CI框架简单使用方法

    CI框架简单使用方法 1.回忆MVC 1.1.M:模型,提供数据,保存数据 1.2.V:视图,只负责显示,表单form 1.3.C:控制器,协调模型和视图 1.4.action:动作,是控制器中的方法 ...

  5. VUE图片懒加载-vue lazyload插件的简单上手使用(优化版本)

    在用VUE做项目开发的过程中,首页用到了懒加载的方法,查找了一些方法,觉得官网写得太复杂,有一篇博客不错(https://www.cnblogs.com/xyyt/p/7650539.html),但是 ...

  6. 基于jquery的bootstrap在线文本编辑器插件Summernote 简单强大

    Summernote是一个基于jquery的bootstrap超级简单WYSIWYG在线编辑器.Summernote非常的轻量级,大小只有30KB,支持Safari,Chrome,Firefox.Op ...

  7. Xcode7使用插件的简单方法&&以及怎样下载到更早版本的Xcode

    Xcode7自2015年9上架以来也有段时间了, 使用Xcode7以及Xcode7.1\Xcode7.2的小伙伴会发现像VVDocumenter-Xcode\KSImageNamed-Xcode\HO ...

  8. CI框架使用PHPmail插件发送QQ邮件:

    有助请顶,不好请评.0:33 2016/3/12CI框架使用PHPmail插件发送QQ邮件:发送成功,不过修改了主机参数,还包含了一个phpmail中的一个另外的文件,详见下方:参见:http://c ...

  9. CI框架如何在主目录application目录之外使用uploadify上传插件和bootstrap前端框架:

    19:29 2016/3/10CI框架如何在主目录application目录之外使用uploadify上传插件和bootstrap前端框架:项目主路径:F:\wamp\www\graduationPr ...

随机推荐

  1. java 对象的this使用 java方法中参数传递特性 方法的递归

    一.this关键字,使用的情形,以及如何使用. 1.使用的情形 类中的方法体中使用this  --初始化该对象 类的构造器中使用this --引用,调用该方法的对象 2.不写this,调用 只要方法或 ...

  2. jdk1.5多线程Lock接口及Condition接口

    jdk1.5多线程的实现的方式: jdk1.5之前对锁的操作是隐式的 synchronized(对象) //获取锁 { } //释放锁 jdk1.5锁的操作是显示的:在包java.util.concu ...

  3. Linux下搭建Oracle11g RAC(6)----安装Grid Infrastructure

    从此步骤开始,我们正式安装Grid软件: ① 以grid用户登录图形界面,执行/home/grid/grid/runInstaller,进入OUI的图形安装界面: ② 进入OUI安装界面后,选择第3项 ...

  4. java 百分比显示

    DecimalFormat percent = new DecimalFormat("0.00%"); completed_num = (double) involvedTask_ ...

  5. C# QRCode、DataMatrix和其他条形码的生成和解码软件

    今天制造了一个C#的软件,具体是用于生成二维码和条形码的,包括常用的QRCode.DataMatrix.Code128.EAN-8等等. 使用的第三方类库是Zxing.net和DataMatrix.n ...

  6. C#入门教程(二)–C#常用快捷键、变量、类型转换-打造C#学习教程

    C#入门教程(一)–.Net平台技术介绍.C#语言及开发工具介绍-打造C#学习教程 上次教程主要介绍了.Net平台以及C#语言的相关介绍.以及经典程序案例,helloworld程序. 初来乍到,第一次 ...

  7. ASP.NET MVC 第八回 Helper之演化

    题目:如何在View中写一个超级连接连接到主页? 这个问题看起来很好回答: <a href="/home/index">首页</a> 其实上面这种不能称之为 ...

  8. sql like '%x%'优化

    好久没写点什么了.唉(此处省略无数,一切尽在苦逼中...) 说说sql中的全匹配优化吧.在sql server进行模糊查询的时候,如果是进行全匹配的话,那么肯定会用到like.我们知道like '%张 ...

  9. CSS之关于clearfix--清除浮动

    一,什么是.clearfix 你只要到Google或者Baidu随便一搜"css清除浮动",就会发现很多网站都讲到"盒子清除内部浮动时可以用到.clearfix" ...

  10. What's DB2 模式?

    近期负责一个银行方面的项目,需要用到DB2实现多数据库版本切换.初步接触DB2,对于它的管理工具(IBM DATA STUDIO)虽然与ORACLE\MSSQL大同小异,但还是有些东西不一样的.比如什 ...