• 技术文章 >php框架 >ThinkPHP

    详解thinkphp ajaxfileupload异步上传图片

    藏色散人藏色散人2021-04-30 09:02:15转载171
    下面由thinkphp教程栏目给大家介绍thinkphp ajaxfileupload异步上传图片方法,希望对需要的朋友有所帮助!

    thinkphp ajaxfileupload 异步上传图片

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

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

    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中创建相关p

    <label class="title w100">封面图片:</label>
    <p 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>                    
    </p>
    <p class="blank15"></p>
    <!--上传成功后图片会在这里显示否则是默认图片-->
    <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));
            }
        }

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

    以上就是详解thinkphp ajaxfileupload异步上传图片的详细内容,更多请关注php中文网其它相关文章!

    声明:本文转载于:segmentfault,如有侵犯,请联系admin@php.cn删除
    专题推荐:php javascript
    上一篇:介绍thinkphp5.0修改器和数据完成的关系及使用方法 下一篇:关于ThinkPHP的join关联查询不使用默认的表前缀
    第16期线上培训班

    相关文章推荐

    • Thinkphp5前端代码原样输出• 介绍ThinkPHP空操作、空控制器处理• 关于thinkphp5.0.X全版本变量覆盖导致的RCE分析• 关于ThinkPHP多表联合查询的常用方法• 介绍thinkphp5.0修改器和数据完成的关系及使用方法

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网