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

浏览数：30 / 时间：2015年06月09日

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框架）,古老的榕树,5-wow.com

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

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