ThinkPHP+ajaxupload.js实现上传图片功能

jerry thinkphp 2015年11月19日收藏

ThinkPHP+ajaxupload.js实现上传图片功能
应用的ThinkPHP版本为3.1.3
index.html模板页面代码如下

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>图片上传</title>

<script type="text/javascript" src="/ajaxup/Public/js/jquery.js"></script>

<script type="text/javascript" src="/ajaxup/Public/js/ajaxupload.js"></script>

<script type="text/javascript">

$(function(){

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

    var confirmdiv = $('#uploadphotoconfirm');

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

    new AjaxUpload(button,{

        action: "{:U('Index/uppic')}",

        name: 'userfile',

        onSubmit : function(file, ext){

            if(fileType == "pic")

            {

                if (ext && /^(jpg|png|jpeg|gif|JPG)$/.test(ext)){

                    this.setData({

                        'info': '文件类型为图片'

                    });

                } else {

                     confirmdiv.text('文件格式错误，请上传格式为.png .jpg .jpeg 的图片');

                    return false;               

                }

            }

                        

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

            

            if(fileNum == 'one')

                this.disable();

            

            interval = window.setInterval(function(){

                var text = confirmdiv.text();

                if (text.length < 14){

                    confirmdiv.text(text + '.');                    

                } else {

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

                }

            }, 200);

        },

        onComplete: function(file, response){

            if(response != "success"){

                if(response =='2'){

                    confirmdiv.text("文件格式错误，请上传格式为.png .jpg .jpeg 的图片");

                }else{

                    if(response.length>20){

                        confirmdiv.text("文件上传失败请重新上传"+response);            

                    }else{

                        confirmdiv.text("上传完成");

                         $("#newbikephotoName").val("/ajaxup/upload/images/"+response);

                        $("#newbikephoto").attr("src","/ajaxup/upload/images/"+response);            

                    }

                }

                

            }

                                  

            window.clearInterval(interval);

                        

            this.enable();

            

            if(response == "success")

            alert('上传成功');              

        }

    });

});



</script>

</head>

<body>


    <label class="control-label" for="bike_type"> </label>

    <input type="file" style="display:none" name="userfile">

    <input type="hidden" id="newbikephotoName" name="bike_photo" value="" />

    <input type="hidden" id="oldbikephotoName" value="" />

    <div class="controls" style="text-align:left;">

        <img  id="newbikephoto" src="/ajaxup/Public/images/nophoto.jpg" style="max-height:200px;" />

        <span class="help-inline"></span>

        <br>

        <div id="uploadphotoconfirm"></div>

        <br>

        <input type="button" class="btn btn-primary" id="upload_button"  value="上传图片" /><br/>

        <span class="help-inline">*请上传格式为.png .jpg .jpeg 的图片</span>

    </div>


</body>

</html>

IndexAction.class.php代码如下：

<?php

/**

 * 图片上传

 * QQ:1739205253 中午有点风

 */

class IndexAction extends Action {

    public function index(){

        $this->display();

    }

    

    Public function uppic(){

        import('ORG.Net.UploadFile');

        $upload = new UploadFile();

        $upload->autoSub = true;

        $upload->subType = 'custom';

        if ($upload->upload('./upload/images/')){

            $info = $upload->getUploadFileInfo();

        }

        $file_newname = $info['0']['savename'];

        $MAX_SIZE = 20000000;

        if($info['0']['type'] !='image/jpeg' && $info['0']['type'] !='image/jpg' && $info['0']['type'] !='image/pjpeg' && $info['0']['type'] != 'image/png' && $info['0']['type'] != 'image/x-png'){

            echo "2";exit;

        }

        if($info['0']['size']>$MAX_SIZE)

            echo "上传的文件大小超过了规定大小";

        

        if($info['0']['size'] == 0)

            echo "请选择上传的文件";

        switch($info['0']['error'])

        {

            case 0:

                echo $file_newname;

                break;

            case 1:

                echo "上传的文件超过了 php.ini 中 upload_max_filesize 选项限制的值";

                break;

            case 2:

                echo "上传文件的大小超过了 HTML 表单中 MAX_FILE_SIZE 选项指定的值";

                break;

            case 3:

                echo "文件只有部分被上传";

                break;

            case 4:

                echo "没有文件被上传";

                break;

        }

    }

}