Ajaxupload插件超级简单使用（php的ci框架）

                     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;
　　　　　　　　　　　　　　　　 }
                   }