Detailed explanation of thinkphp ajaxfileupload asynchronous upload of pictures-ThinkPHP-php.cn

The following is the thinkphp tutorial column to introduce to you the thinkphp ajaxfileupload asynchronous uploading image method. I hope it will be helpful to friends in need!

thinkphp develops picture uploading, and asynchronous picture uploading is currently a more convenient function. I will not write the css file here, but write the code.

Introducing the core file download https://github.com/carlcarl/AjaxFileUpload

HTML

below First, introduce relevant js resources into the html page

nbsp;html>


<meta>
<title>图片上传</title> 
<script></script>
<script></script>

Next, create the relevant p

<label>封面图片:</label>
<p>
    <label>
        <input>
        <!--上传成功后图片会给value赋值图片路径，以便于form表单提交数据-->
        <input>                        
    </label>
    <label></label>                    
</p>
<p></p>
<!--上传成功后图片会在这里显示否则是默认图片-->
<img  src="/static/imghwm/default1.png" data-src="/Public/images/empty_thumb.gif" class="lazy" alt="Detailed explanation of thinkphp ajaxfileupload asynchronous upload of pictures" >

Explain it in the body:
upd_file(this,'image_file') is indispensable
The hidden input is used to assign the image path after the upload is successful, so that the form can submit data
Next, edit the javascript script in html to facilitate the delivery and submission of the image function

<script>
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;<input type="hidden" name="img_url" value="&#39;+ path.path +&#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");
});    
}
<script></script>

create the method app_upload_image in thikphp ()

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

OK, that’s fine. First of all, let me tell you that if ajaxfileupload.js reports an error, the program will not run. If your program reports an error, check whether your ajaxfileupload file is a version problem. .

The above is the detailed content of Detailed explanation of thinkphp ajaxfileupload asynchronous upload of pictures. For more information, please follow other related articles on the PHP Chinese website!