详解thinkphp ajaxfileupload异步上传图片

下面由thinkphp教程栏目给大家介绍thinkphp ajaxfileupload异步上传图片方法，希望对需要的朋友有所帮助！

thinkphp ajaxfileupload 异步上传图片

thinkphp开发图片上传，图片异步上传是目前比较方便的功能,这里我就不写css文件了，将代码写出来。

引入核心文件下载https://github.com/carlcarl/AjaxFileUpload

立即学习“PHP免费学习笔记（深入）”；

HTML

Cutout老照片上色

Cutout.Pro推出的黑白图片上色

20 查看详情

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

接下来在body中创建相关p

封面图片:
                                                                                

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

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('');                       }                       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");});    }

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 ThinkUpload($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 ThinkImage();                 $image->open($imgsrc);                //将图片裁剪为400x400并保存为corp.jpg                $image->thumb(205, 160,ThinkImage::IMAGE_THUMB_CENTER)->save($imgsrc);            $this->ajaxReturn(array("thumb_url"=>$img,"url"=>$img,"status"=>1));        }    }

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