php + ajax异步上传文件阿星小栈

最新推荐文章于 2023-03-31 15:31:34 发布

阿星小栈

最新推荐文章于 2023-03-31 15:31:34 发布

阅读量182

点赞数 1

分类专栏： PHP JS 文章标签：上传图片 upload js上传图片 PHP上传

本文链接：https://blog.csdn.net/u010244476/article/details/83826689

版权

PHP 同时被 2 个专栏收录

37 篇文章 2 订阅

订阅专栏

10 篇文章 1 订阅

订阅专栏

html代码

<head>
    <script src="/libs/jQuery/jquery-2.2.4.min.js"></script>
    <script>
        var url = "{{ url('/admin/test/upload') }}";
        $(function () {
            $("#upload").click(function () {
                $("#imgWait").show();
                var formData = new FormData();
                formData.append("file", document.getElementById("file1").files[0]);
                $.ajax({
                    url: url,
                    type: "POST",
                    data: formData,
                    /**
                     *必须false才会自动加上正确的Content-Type
                     */
                    contentType: false,
                    /**
                     * 必须false才会避开jQuery对 formdata 的默认处理
                     * XMLHttpRequest会对 formdata 进行正确的处理
                     */
                    processData: false,
                    success: function (data) {
                        if (data.status == "true") {
                            alert("上传成功！");
                        }
                        if (data.status == "error") {
                            alert(data.msg);
                        }
                        $("#imgWait").hide();
                    },
                    error: function () {
                        alert("上传失败！");
                    }
                });
            });
        });

       
        function uploadFile(ev){
            var that = this;
            const file = document.getElementById('file1');
            const fileObj = file.files[0];
            const windowURL = window.URL || window.webkitURL;
            const img = document.getElementById('preview');
            if(file && fileObj) {
                const dataURl = windowURL.createObjectURL(fileObj);
                img.setAttribute('src',dataURl);
            }
        }

    </script>
</head>
<body>
选择文件:<input type="file" id="file1" onchange="uploadFile(this)"/><br />
<input type="button" id="upload" value="上传" />
<span id="imgWait" class="hide">加载中</span>
<img id="preview" src=""/>
</body>

PHP代码

 public function upload(Request $request){
        if (file_exists("upload/" . $_FILES["file"]["name"]))
        {
            echo $_FILES["file"]["name"] . " already exists. ";
        }
        else
        {
            $url = "upload/" . time() .rand(1, 10000).'.'.pathinfo($_FILES["file"]["name"])['extension'];
            move_uploaded_file($_FILES["file"]["tmp_name"], $url);
        }


        return $this->success([
            'url'=>$url
        ]);

    }

阿星小栈

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
php + ajax异步上传文件阿星小栈

html代码&lt;head&gt; &lt;script src="/libs/jQuery/jquery-2.2.4.min.js"&gt;&lt;/script&gt; &lt;script&gt; var url = "{{ url('/admin/test/upload') }}"; $(function () { ...
复制链接

扫一扫