PHP群:95885625 Hbuilder+MUI群:81989597 站长QQ:634381967
    您现在的位置: 首页 > 开发编程 > ThinkPhp教程 > 正文

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

    作者:admin来源:网络浏览:时间:2020-09-30 00:07:50我要评论
    导读:ThinkPHP+ajaxupload.js实现上传图片功能,应用的ThinkPHP版本为3.1.3index.html模板页面代码如下<!doctypehtml><html><head><metacharset=...
    ThinkPHP+ajaxupload.js实现上传图片功能,应用的ThinkPHP版本为3.1.3
    index.html模板页面代码如下

    1. <!doctype html> 
    2. <html> 
    3. <head> 
    4. <meta charset="utf-8"> 
    5. <title>图片上传</title> 
    6. <script type="text/javascript" src="/ajaxup/Public/js/jquery.js"></script> 
    7. <script type="text/javascript" src="/ajaxup/Public/js/ajaxupload.js"></script> 
    8. <script type="text/javascript"> 
    9. $(function(){  
    10.     var button = $('#upload_button'), interval;  
    11.     var confirmdiv = $('#uploadphotoconfirm');  
    12.     var fileType = "pic",fileNum = "one";   
    13.     new AjaxUpload(button,{  
    14.         action: "{:U('Index/uppic')}",  
    15.         name: 'userfile',  
    16.         onSubmit : function(file, ext){  
    17.             if(fileType == "pic")  
    18.             {  
    19.                 if (ext && /^(jpg|png|jpeg|gif|JPG)$/.test(ext)){  
    20.                     this.setData({  
    21.                         'info': '文件类型为图片'  
    22.                     });  
    23.                 } else {  
    24.                      confirmdiv.text('文件格式错误,请上传格式为.png .jpg .jpeg 的图片');  
    25.                     return false;                 
    26.                 }  
    27.             }  
    28.                           
    29.             confirmdiv.text('文件上传中');  
    30.               
    31.             if(fileNum == 'one')  
    32.                 this.disable();  
    33.               
    34.             interval = window.setInterval(function(){  
    35.                 var text = confirmdiv.text();  
    36.                 if (text.length < 14){  
    37.                     confirmdiv.text(text + '.');                      
    38.                 } else {  
    39.                     confirmdiv.text('文件上传中');               
    40.                 }  
    41.             }, 200);  
    42.         },  
    43.         onComplete: function(file, response){  
    44.             if(response != "success"){  
    45.                 if(response =='2'){  
    46.                     confirmdiv.text("文件格式错误,请上传格式为.png .jpg .jpeg 的图片");  
    47.                 }else{  
    48.                     if(response.length>20){  
    49.                         confirmdiv.text("文件上传失败请重新上传"+response);              
    50.                     }else{  
    51.                         confirmdiv.text("上传完成");  
    52.                          $("#newbikephotoName").val("/ajaxup/upload/images/"+response);  
    53.                         $("#newbikephoto").attr("src","/ajaxup/upload/images/"+response);              
    54.                     }  
    55.                 }  
    56.                   
    57.             }  
    58.                                     
    59.             window.clearInterval(interval);  
    60.                           
    61.             this.enable();  
    62.               
    63.             if(response == "success")  
    64.             alert('上传成功');                
    65.         }  
    66.     });  
    67. });  
    68.  
    69.  
    70. </script> 
    71. </head> 
    72. <body> 
    73.  
    74.     <label class="control-label" for="bike_type"> </label> 
    75.     <input type="file" style="display:none" name="userfile"> 
    76.     <input type="hidden" id="newbikephotoName" name="bike_photo" value="" /> 
    77.     <input type="hidden" id="oldbikephotoName" value="" /> 
    78.     <div class="controls" style="text-align:left;"> 
    79.         <img  id="newbikephoto" src="/ajaxup/Public/images/nophoto.jpg" style="max-height:200px;" /> 
    80.         <span class="help-inline"></span> 
    81.         <br> 
    82.         <div id="uploadphotoconfirm"></div> 
    83.         <br> 
    84.         <input type="button" class="btn btn-primary" id="upload_button"  value="上传图片" /><br/> 
    85.         <span class="help-inline">*请上传格式为.png .jpg .jpeg 的图片</span> 
    86.     </div> 
    87.  
    88. </body> 
    89. </html> 

    IndexAction.class.php代码如下:
     

    1. <?php  
    2. /**  
    3.  * 图片上传  
    4.  * QQ:634381967 
    5.  */ 
    6. class IndexAction extends Action {  
    7.     public function index(){  
    8.         $this->display();  
    9.     }  
    10.       
    11.     Public function uppic(){  
    12.         import('ORG.Net.UploadFile');  
    13.         $upload = new UploadFile();  
    14.         $upload->autoSub = true;  
    15.         $upload->subType = 'custom';  
    16.         if ($upload->upload('./upload/images/')){  
    17.             $info = $upload->getUploadFileInfo();  
    18.         }  
    19.         $file_newname = $info['0']['savename'];  
    20.         $MAX_SIZE = 20000000;  
    21.         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'){  
    22.             echo "2";exit;  
    23.         }  
    24.         if($info['0']['size']>$MAX_SIZE)  
    25.             echo "上传的文件大小超过了规定大小";  
    26.           
    27.         if($info['0']['size'] == 0)  
    28.             echo "请选择上传的文件";  
    29.         switch($info['0']['error'])  
    30.         {  
    31.             case 0:  
    32.                 echo $file_newname;  
    33.                 break;  
    34.             case 1:  
    35.                 echo "上传的文件超过了 php.ini 中 upload_max_filesize 选项限制的值";  
    36.                 break;  
    37.             case 2:  
    38.                 echo "上传文件的大小超过了 HTML 表单中 MAX_FILE_SIZE 选项指定的值";  
    39.                 break;  
    40.             case 3:  
    41.                 echo "文件只有部分被上传";  
    42.                 break;  
    43.             case 4:  
    44.                 echo "没有文件被上传";  
    45.                 break;  
    46.         }  
    47.     }  

    ThinkPHP+ajaxupload.js上传图片.zip 

    转载请注明(B5教程网)原文链接:https://b5.mxunkeji.com/content-83-1496-1.html
    相关热词搜索: