• 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;
                     } }
     
  • 相关阅读:
    冲刺周期第一天
    05构建之法阅读笔记之三
    第十周进度表
    问题账户需求分析
    2016年秋季个人阅读计划
    课后作业--1:《软件需求与分析》博文读后感
    《人月神话》阅读笔记--3
    《人月神话》阅读笔记--02
    《人月神话》阅读笔记--01
    个人总结
  • 原文地址:https://www.cnblogs.com/sustudy/p/3907589.html
Copyright © 2020-2023  润新知