首页 > 代码库 > Ajaxupload插件超级简单使用（php的ci框架）

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

2024-07-17 04:43:14   219人阅读

                     Ajaxupload简单使用

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

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

 

1、 引用AjaxUpload.js文件

#public/js/ajaxupload.js ajaxupload插件的文件位置
<script tyep="text/javascript" src="http://www.mamicode.com/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 = http://www.mamicode.com/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;
　　　　　　　　　　　　　　　　 }                   }

 

 

 

 


联系
我们