利用ajax上传图片并预览

最新推荐文章于 2025-06-07 14:38:43 发布

原创最新推荐文章于 2025-06-07 14:38:43 发布 · 436 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ajax上传

php 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一种使用FormData对象上传图片的方法，并提供了从前端到后端的完整实现示例。通过这种方式，可以实现在用户选择文件后立即预览图片，并通过Ajax异步上传至服务器。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

（1）通过FormData对象可以组装一组用 XMLHttpRequest发送请求的键/值对。

它可以更灵活方便的发送表单数据，因为可以独立于表单使用。

表单部分

<div class="form-group">
                                <label for="lastname" class="col-sm-2 control-label">二维码</label>
                            <div class="col-sm-10">
                                <input id="avatar" type="text" value="" name="avatar" style="width: 400px">
                                <input type="file"  id="qrcode">
                                <img src="" alt="" id="avatarPreview" style="max-width: 350px;max-height: 100px">
                            </div>

<script type="text/javascript">
                                $(function () {
                                    bindAvatar1();
                                });

                                /*Ajax上传至后台并返回图片的url*/
                                function bindAvatar1() {
                                    $("#qrcode").change(function () {
                                        var formData=new FormData();
                                        formData.append('qrcode', $("#qrcode")[0].files[0]);  /*获取上传的图片对象*/
                                        $.ajax({
                                            url: '__CONTROLLER__/uploadImage',
                                            type: 'POST',
                                            data: formData,
                                            contentType: false,
                                            processData: false,
                                            success: function (args) {
                                                console.log(args);  /*服务器端的图片地址*/
                                                $("#avatarPreview").attr('src','/'+args);  /*预览图片*/
                                                $("#avatar").val(args);  /*将服务端的图片url赋值给form表单的隐藏input标签*/
                                            }
                                        })
                                    })
                                }


                            </script>

PHP后台

    /*
     * By Linmin
     * 上传图片
     * */
    public function uploadImage()
    {
        $upload = new \Think\Upload();// 实例化上传类
        $upload->maxSize   =     3145728 ;// 设置附件上传大小
        $upload->exts      =     array('jpg', 'gif', 'png', 'jpeg');// 设置附件上传类型
        $upload->rootPath  =     './images/'; // 设置附件上传根目录
        $upload->savePath  =     ''; // 设置附件上传（子）目录

        // 上传文件
        $info   =   $upload->upload();
        $savepath=$info['qrcode']['savepath'];
        $savename=$info['qrcode']['savename'];


        $response='./images/'.$savepath.$savename;
        if(!$info) {// 上传错误提示错误信息
            $this->error($upload->getError());
        }else{// 上传成功
//          $this->success('上传成功！');
            $this->ajaxreturn($response);

        }


    }