1. 程式人生 > >php + ajax非同步上傳檔案 阿星小棧

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