Asynchronous upload is a painful problem. Today, let's talk about asynchronous upload

The first step is to introduce ajaxSubmit, a js plugin

<!--Submit pictures asynchronously-->
    <script src="__PUBLIC__/js/jquery.ajaxSubmit.js"></script>

 <input type="file" id="file" name="b_head" class="col-xs-6 ttee" onchange="changePhoto();" style="display: none"  />
                           <label for="file">
                               <img <if condition="$data.user_b_head neq ''">src="upload/{$data.user_b_head}"<else/>src="__PUBLIC__/image/ic_upload.png"</if>  id="new_pic"  alt="" class="col-xs-6 img-responsive"/>
                           </label>
                           <input type="hidden" name="user_b_head" id="head"/>

Start js processing

 <script>
        $(".ttee").click(function () {
            $(this).wrap("<form id='addPic' method='post' action="+"{:U('upload')}"+" enctype='multipart/form-data'></form>");
        });
        function changePhoto() {
            $('#addPic').ajaxSubmit({
                dataType:'json',
                success:function(data){
                    $('.ttee').unwrap();
                        $('#new_pic').attr('src',"upload/"+data.src);
                    $("#head").val(data.id);
                },
                error:function(err){
                    $('.ttee').unwrap();
                    console.log(JSON.stringify(err));
                }
            })
        }



    </script>

Trigger time for plugin submission when picture selection is complete

 $('.ttee').unwrap();

Background reception is the same as usual

I'm writing it here in tp

//Upload pictures
    public function upload(){
        $file = $this->setUpload($_FILES['b_head']);
        $src =  $file['savepath'].$file['savename'];
        $data['src'] = $src;
        //Insert data
        $id = M('picture')->add(array('path'=>$src));
        $data['id'] = $id;
        echo json_encode($data);
    }
    //Upload pictures
    private function setUpload($file){
        header("Content-Type: text/html;charset=utf-8");
        $upload = new \Think\Upload();// Instantiate Upload Class
        $upload->maxSize   =     3145728 ;// Set attachment upload size
        $upload->exts      =     array('jpg', 'gif', 'png', 'jpeg');// Set attachment upload type
        $upload->rootPath  =     './upload/'; // Set attachment upload root directory
        $upload->savePath  =     date("Y",time())."/".date("m",time())."/".date("d",time())."/"; // Set up attachment upload (sub) directory
        // Upload Files
        $info   =   $upload->uploadOne($file);
        if(!$info) {// Upload Error Prompt Error Information
            $this->success($upload->getError());exit;
        }else{// Upload Successful
            return $info;
        }
    }

www.poison2016.cn