ajax实现异步上传文件

 html+js代码

<form action="" enctype="multipart/form-data" id="upForm">
    {{csrf_field()}}
    <input type="text" name="name" value="">
    <input type="file" name="file" class="file"><br><br>
    <input type="button" value="提交" class="btn">

</form>

<div id="pic">
    <img src="{{asset('')}}/uploads/logo.png" alt="" id="imgs" style="width:300px;height:300px;">
</div>


<script src="{{asset('js/jquery.js')}}"></script>
<script src="{{asset('js/jquery.form.js')}}"></script>
<script>
    $(function(){
        $('.btn').on('click',function() {
            $('#upForm').ajaxSubmit({
                url:"{{url('index/index')}}",
                type: 'POST',
                data: $('form').serialize(),
                success:function(res){
                    src = "{{asset('')}}uploads/"+res;
                    $("#imgs").attr("src",src);

                }
            })
        });
    })

</script>

php代码

只是实现了上传功能，其他的判断操作自行更改添加

if($request->isMethod('post')){
            $all = $request->file('file');
            $filename = $all->getClientOriginalName();
            $path = $all->getRealPath();   //临时文件的绝对路径
            $res = $all->move('./uploads/',$filename);
            return $filename;
        }

        return view('upload');