異步上傳圖片-ajaxSubmit提交-Poison

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

 

第一步 引入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"/>

講file文件關聯到img標籤裏面，點擊img圖片就能觸發file進行選擇文件

 

 

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

這裏不難看的出來 在點擊的時候給父級包裹一層form表單

 

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

 

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

這個則是進行移除form表單

 

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

我這裏是用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