非同步上傳是一個很蛋疼的問題，今天就來說說非同步上傳的故事

第一步 引入ajaxSubmit這個js外掛

<!--非同步提交圖片-->
    <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"/>
 

開始js處理

 <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>
 

當圖片選擇完時候觸發時間 進行外掛的提交

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

後臺接收和平常是一樣一樣的

我這裡是用tp寫的

//上傳圖片
    public function upload(){
        $file = $this->setUpload($_FILES['b_head']);
        $src =  $file['savepath'].$file['savename'];
        $data['src'] = $src;
        //進行資料插入
        $id = M('picture')->add(array('path'=>$src));
        $data['id'] = $id;
        echo json_encode($data);
    }
    //上傳圖片
    private function setUpload($file){
        header("Content-Type: text/html;charset=utf-8");
        $upload = new \Think\Upload();// 例項化上傳類
        $upload->maxSize   =     3145728 ;// 設定附件上傳大小
        $upload->exts      =     array('jpg', 'gif', 'png', 'jpeg');// 設定附件上傳型別
        $upload->rootPath  =     './upload/'; // 設定附件上傳根目錄
        $upload->savePath  =     date("Y",time())."/".date("m",time())."/".date("d",time())."/"; // 設定附件上傳（子）目錄
        // 上傳檔案
        $info   =   $upload->uploadOne($file);
        if(!$info) {// 上傳錯誤提示錯誤資訊
            $this->success($upload->getError());exit;
        }else{// 上傳成功
            return $info;
        }
    }
 

www.poison2016.cn