thinkphp ajaxfileupload实现异步上传图片的示例-6ren

thinkphp ajaxfileupload实现异步上传图片的示例

转载作者：qq735679552 更新时间：2022-09-28 22:32:09

CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章thinkphp ajaxfileupload实现异步上传图片的示例由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.

thinkphp开发图片上传，图片异步上传是目前比较方便的功能,这里我就不写css文件了，将代码写出来。引入核心文件下载https://github.com/carlcarl/A... 。

HTML 。

下面首先在html页面引入相关js资源。

 
    ? 
   
 
     
       
       
         <!DOCTYPE html> 
        
 
         < 
         html 
         lang 
         = 
         "en" 
         > 
        
 
         < 
         head 
         > 
        
 
         < 
         meta 
         charset 
         = 
         "UTF-8" 
         > 
        
 
         < 
         title 
         >图片上传</ 
         title 
         >  
        
 
         < 
         script 
         type 
         = 
         "text/javascript" 
         src 
         = 
         "js/jquery-1.8.2.min.js" 
         ></ 
         script 
         > 
        
 
         < 
         script 
         type 
         = 
         "text/javascript" 
         src 
         = 
         "js/ajaxfileupload.js" 
         ></ 
         script 
         >  
        
 
         </ 
         head 
         > 
        
 
         < 
         body 
         > 
        
 
         </ 
         body 
         > 
        
 
         </ 
         html 
         > 
        
 
     
 
   

接下来在body中创建相关div 。

 
    ? 
   
 
     
       
       
         < 
         label 
         class 
         = 
         "title w100" 
         >封面图片:</ 
         label 
         > 
        
 
         < 
         div 
         class 
         = 
         "f_l" 
         > 
        
 
           
         < 
         label 
         class 
         = 
         "fileupload" 
         onclick 
         = 
         "upd_file(this,'image_file');" 
         > 
        
 
            
         < 
         input 
         type 
         = 
         "file" 
         class 
         = 
         "filebox" 
         name 
         = 
         "image_file" 
         id 
         = 
         "image_file" 
         /> 
        
 
            
         <!--上传成功后图片会给value赋值图片路径，以便于form表单提交数据--> 
        
 
            
         < 
         input 
         type 
         = 
         "hidden" 
         name 
         = 
         "image" 
         value 
         = 
         "" 
         >       
        
 
           
         </ 
         label 
         > 
        
 
           
         < 
         label 
         class 
         = 
         "fileuploading hide" 
         ></ 
         label 
         >      
        
 
         </ 
         div 
         > 
        
 
         < 
         div 
         class 
         = 
         "blank15" 
         ></ 
         div 
         > 
        
 
         <!--上传成功后图片会在这里显示否则是默认图片--> 
        
 
         < 
         img 
         id 
         = 
         "image" 
         src 
         = 
         "/Public/images/empty_thumb.gif" 
         /> 
        
 
     
 
   

解释一下:

其中upd_file(this,'image_file')不可缺少。

其中隐藏的input 是用于上传成功后赋值图片路径，以便于form表单提交数据。

接下来在html中编辑javascript脚本以便于传递和提交图片功能。

 
    ? 
   
         <script> 
        
         function 
         upd_file(obj,file_id){  
        
         $( 
         "input[name='" 
         +file_id+ 
         "']" 
         ).bind( 
         "change" 
         , 
         function 
         (){    
        
         $(obj).hide(); 
        
         $(obj).parent().find( 
         ".fileuploading" 
         ).removeClass( 
         "hide" 
         ); 
        
         $(obj).parent().find( 
         ".fileuploading" 
         ).removeClass( 
         "show" 
         ); 
        
         $(obj).parent().find( 
         ".fileuploading" 
         ).addClass( 
         "show" 
         ); 
        
         $.ajaxFileUpload 
        
         ( 
        
         { 
        
         url: 
         '/index.php/home/avatar/app_upload_image' 
         , 
         //上传图片处理文件 
        
         secureuri: 
         false 
         , 
        
         fileElementId:file_id, 
        
         dataType:  
         'json' 
         , 
        
         success:  
         function 
         (data, status) 
        
         { 
        
         $(obj).show(); 
        
         $(obj).parent().find( 
         ".fileuploading" 
         ).removeClass( 
         "hide" 
         ); 
        
         $(obj).parent().find( 
         ".fileuploading" 
         ).removeClass( 
         "show" 
         ); 
        
         $(obj).parent().find( 
         ".fileuploading" 
         ).addClass( 
         "hide" 
         ); 
        
         if 
         (data.status==1) 
        
         { 
        
         $( 
         "#image" 
         ).attr( 
         "src" 
         ,data.thumb_url+ 
         "?r=" 
         +Math.random());         
        
         $( 
         "input[name='image']" 
         ).val(data.url); 
         //返回json后将隐藏input赋值 
        
         //$("#img_url").html('<input type="hidden" name="img_url" value="'+ path.path +'" />'); 
        
         } 
        
         else 
        
         { 
        
         $.showErr(data.msg); 
        
         } 
        
         }, 
        
         error:  
         function 
         (data, status, e) 
        
         { 
        
         $.showErr(data.responseText);; 
        
         $(obj).show(); 
        
         $(obj).parent().find( 
         ".fileuploading" 
         ).removeClass( 
         "hide" 
         ); 
        
         $(obj).parent().find( 
         ".fileuploading" 
         ).removeClass( 
         "show" 
         ); 
        
         $(obj).parent().find( 
         ".fileuploading" 
         ).addClass( 
         "hide" 
         ); 
        
         } 
        
         } 
        
         ); 
        
         $( 
         "input[name='" 
         +file_id+ 
         "']" 
         ).unbind( 
         "change" 
         ); 
        
         });  
        
         } 
        
         <script>

thikphp 中创建方法 app_upload_image() 。

 
    ? 
   
 
     
       
       
         function 
         app_upload_image( 
         $maxSize 
         =52428800){ 
        
 
           
         $id 
         =session( 
         'id' 
         ); 
        
 
           
         $config 
         = 
         array 
         ( 
        
 
            
         'rootPath' 
         => 
         'Upload' 
         ,    
         //文件上传保存的根路径 
        
 
            
         'savePath' 
         => 
         '/avatar/' 
         ,  
        
 
            
         'exts'  
         =>  
         array 
         ( 
         'jpg' 
         ,  
         'gif' 
         ,  
         'png' 
         ,  
         'jpeg' 
         , 
         'bmp' 
         ), 
        
 
            
         'maxSize' 
         =>  
         $maxSize 
         , 
        
 
            
         'autoSub' 
         => true, 
        
 
            
         ); 
        
 
           
         $upload 
         =  
         new 
         \Think\Upload( 
         $config 
         ); 
         // 实例化上传类 
        
 
           
         $z 
         =  
         $upload 
         ->uploadOne( 
         $_FILES 
         [ 
         'image_file' 
         ]); 
        
 
           
         if 
         ( 
         $z 
         ) { 
        
 
           
         //拼接图片的路径名 
        
 
             
         $img 
         = 
         '/Upload' 
         . 
         $z 
         [ 
         'savepath' 
         ]. 
         $z 
         [ 
         'savename' 
         ]; 
        
 
             
         $_POST 
         [ 
         'image_file' 
         ]= 
         $img 
         ; 
        
 
             
         //获取上传图片绝对路径 
        
 
             
         $imgsrc 
         = 
         $_SERVER 
         [ 
         'DOCUMENT_ROOT' 
         ].__ROOT__. 
         $_POST 
         [ 
         'image_file' 
         ]; 
        
 
             
         $image 
         =  
         new 
         \Think\Image();  
        
 
             
         $image 
         ->open( 
         $imgsrc 
         ); 
        
 
             
         //将图片裁剪为400x400并保存为corp.jpg 
        
 
             
         $image 
         ->thumb(205, 160,\Think\Image::IMAGE_THUMB_CENTER)->save( 
         $imgsrc 
         ); 
        

            
        
 
            
         $this 
         ->ajaxReturn( 
         array 
         ( 
         "thumb_url" 
         => 
         $img 
         , 
         "url" 
         => 
         $img 
         , 
         "status" 
         =>1)); 
        
 
           
         } 
        
 
         } 
        
 
     
 
   