Laravel ajax图片上传

最新推荐文章于 2021-11-17 14:27:57 发布

原创最新推荐文章于 2021-11-17 14:27:57 发布 · 663 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

资料多来源于网络，如有侵权，请联系本人予以删除

收录于

Laravel

本文介绍如何使用Laravel框架结合AJAX实现图片上传功能。通过前端代码展示，包括HTML输入元素、文件选择和AJAX请求，以及后端控制器处理上传逻辑。详细解释了FormData构造、CSRF令牌设置、上传路径配置、文件移动和返回处理。

Laravel ajax图片上传

页面效果

页面代码

<label>商品图片<span>*</span></label>
<input type="text" placeholder="" class="form-control col-md-6" aria-describedby="helpBlock" name="img" hidden>
<input type="file" id="File"/>
<br/>

ajax

$('#File').change(function(e){
            var formData = new FormData()  //创建一个forData
            var file = this.files[0];
            formData.append('img',file);
            $.ajax({
                headers: { 'X-CSRF-TOKEN' : '{{csrf_token()}}'},
                type: 'POST',
                url: '/admin/goodsImg' ,
                data: formData,
                contentType: false,
                processData: false,
                success:function(data){
                    var url = window.location.protocol+"//"+window.location.host+data;
                    $('#File').next().next().next().attr({'src':url});
                    $('#File').next().next().next().css({'margin':'3% 0 3% 0'});
                    $('#File').prev().attr('value',data);
                },
                error:function(err){
                    console.log(err);
                }

            });
        });

控制器

/*
     * 商品图片上传
     *
     */
    public function upload(Request $request)
    {
        // 获取上传的文件对象
        $pic = $request->file('img');
        //上传文件夹的路径
        $dirname = './uploads/goods/';
        // 获取上传的文件的后缀
        $ext = $pic->getClientOriginalExtension();
        // 拼装出你需要使用的文件名
        $picname = trim($dirname,'.').time().rand(100000,999999).'.'.$ext;
        // 移动临时文件，生成新文件到指定目录下
        $pic->move($dirname,$picname);

        return $picname;
    }

标签

#laravel