1. 程式人生 > >Thinkphp+Jqueryfrom圖片非同步上傳預覽

Thinkphp+Jqueryfrom圖片非同步上傳預覽

讓圖片非同步上傳到專案目錄中,讓使用者或管理員在上傳頭像或商品圖片可以提前預覽是否要上傳的正確

用第三方外掛JQueryfrom來實現這功能

在檢視檔案中匯入JQuery和JQueryfrom檔案

<load file="__PUBLIC__/js_css/jquery-1.9.1.min.js"/>
<load file="__PUBLIC__/js_css/jquery.form.js"/>

html中body為

<div>
    <img id="img" src="" style="display:none" style="width: 100px;height: 100px">
    <form id='myupload' method="post" enctype="multipart/form-data" action="{:U('upload')}">
        <input type="file" name="imageload" id="imageUpload" value="">
    </form>
    <span id="id"></span>
</div>


用JQuery語法編寫javaScript程式碼
<script type="text/javascript">
        $(document).ready(function() {
                    $('#imageUpload').change(function () {
                        $('#myupload').ajaxSubmit({
                            dataType: 'json',
                            success: function (data) {
                                if (data.status == 1) {
                                    var src = data.src;
                                    $('#img').attr('src', src);
                                    $('#img').show();
                                    $('#id').text(data.content);
                                } else {1
                                    $('#id').text(data.content);
                                }
                            },
                            error: function () {
                                alert('上傳失敗');
                            },
                        })
                    })
        })
    </script>


在控制器新建一個方法
public function upload()
    {
        if(!empty($_FILES)){
            $upload=new \Think\Upload();
            $upload->maxSize=3145728; //檔案上傳的大小限制
            $upload->exts=array('jpg','gif','png','jpeg'); //上傳檔案字尾的樣式
            $upload->rootPath='./';   //上傳檔案根目錄
            $upload->savePath='Public/Image/'; //上傳檔案的子目錄
            $upload->saveName='time';//上傳檔案的名稱
            $info=$upload->uploadOne($_FILES['imageload']); //上傳單檔案
            if(!$info){
                $data['status']=0;
                $data['content']="上傳失敗";
                $this->ajaxReturn($data);
            }else{
                $data['status']=1;
                $data['src']=__ROOT__.'/'.$info['savepath'].$info['savename'];
                $data['content']="上傳成功";
                $this->ajaxReturn($data);
            }
        }
    }