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