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);
            }
        }
    }