详解thinkphpajaxfileupload异步上传图片

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

接下来在body中创建相关p

封面图片:

    
        
        
                                
    
                        

解释一下：
其中upd_file(this,&＃39;image_file&＃39;)不可缺少
其中隐藏的input 是用于上传成功后赋值图片路径，以便于form表单提交数据
接下来在html中编辑Javascript脚本以便于传递和提交图片功能

function upd_file(obj,file_id){    
$("input[name=&＃39;"+file_id+"&＃39;]").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:&＃39;/index.php/home/avatar/app_upload_image&＃39;,//上传图片处理文件
                secureuri:false,
                fileElementId:file_id,
                dataType: &＃39;json&＃39;,
                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=&＃39;image&＃39;]").val(data.url);//返回json后将隐藏input赋值
                        //$("#img_url").html(&＃39;&＃39;);
                       }
                       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=&＃39;"+file_id+"&＃39;]").unbind("change");
});    
}

thikphp 中创建方法 app_upload_image()

    function app_upload_image($maxSize=52428800){
        $id=session(&＃39;id&＃39;);
        $cOnfig=array(
            &＃39;rootPath&＃39;  =>&＃39;Upload&＃39;,         //文件上传保存的根路径
            &＃39;savePath&＃39;  =>&＃39;/avatar/&＃39;,   
            &＃39;exts&＃39;      => array(&＃39;jpg&＃39;, &＃39;gif&＃39;, &＃39;png&＃39;, &＃39;jpeg&＃39;,&＃39;bmp&＃39;),
            &＃39;maxSize&＃39;   => $maxSize,
            &＃39;autoSub&＃39;   => true,
            );
        $upload = new \Think\Upload($config);// 实例化上传类
        $z = $upload->uploadOne($_FILES[&＃39;image_file&＃39;]);
        if($z) {
        //拼接图片的路径名
                $img=&＃39;/Upload&＃39;.$z[&＃39;savepath&＃39;].$z[&＃39;savename&＃39;];
                $_POST[&＃39;image_file&＃39;]=$img;
                //获取上传图片绝对路径
                $imgsrc=$_SERVER[&＃39;DOCUMENT_ROOT&＃39;].__ROOT__.$_POST[&＃39;image_file&＃39;];
                $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));
        }
    }

OK这样就好了，首先和大家说一下，如果ajaxfileupload.js报错程序是不会跑通的，如果你的程序报错就检查你的ajaxfileupload文件是不是版本的问题。