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

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("上传失败！");
                    }
                });
            });
        });
    </script>
</head>
<body>
选择文件:<input type="file" id="file1" onchange="uploadFile(this)"/><br />
<input type="button" id="upload" value="上传" />
<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
        ]);

    }

　　

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

 

posted @ 2018-11-05 15:56  阿星小栈  阅读(165)  评论(0)  编辑  收藏  举报