玩新套件(UIkit)遇到上傳功能無法運作問題

uikit upload 上傳檔案 javascript

king742171 2017-05-03 11:30:35 ‧ 6085 瀏覽

分享至

前天找了一個新套件來把玩研究~(UIkit)
這是他的中文官網 → http://www.getuikit.net/index.html
我遇到的問題在這裡 → http://www.getuikit.net/docs/upload.html
我在玩上傳功能~

以下是我寫的程式碼:(歡迎複製測試)

<!DOCTYPE html>
<html lang="en-gb" dir="ltr" class="uk-notouch">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>lightbox</title>
		<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon" />
		<link rel="stylesheet" href="css/uikit.min.css" />
        <script src="js/jquery-3.2.1.min.js"></script>
        <script src="js/uikit.min.js"></script>
        <!-- Upload CSS -->
        <link rel="stylesheet" href="css/components/upload.css">
        <!-- Upload Javascript -->
        <script src="js/components/upload.js"></script>
        <!-- Upload Action Javascript -->
        <script>

		    $(function(){

		        var progressbar = $("#progressbar"),
		            bar         = progressbar.find('.uk-progress-bar'),
		            settings    = {

		            action: './images', // 上傳路徑 url

		            allow : '*.(jpg|gif|png|docx|pdf)', // 只允許上傳檔案類型

		            loadstart: function() {
		                bar.css("width", "0%").text("0%");
		                progressbar.removeClass("uk-hidden");
		            },

		            progress: function(percent) {
		                percent = Math.ceil(percent);
		                bar.css("width", percent+"%").text(percent+"%");
		            },

		            allcomplete: function(response) {

		                bar.css("width", "100%").text("100%");

		                setTimeout(function(){
		                    progressbar.addClass("uk-hidden");
		                }, 250);

		                alert("檔案上傳成功");
		            }
		        };

		        var select = UIkit.uploadSelect($("#upload-select"), settings),
		            drop   = UIkit.uploadDrop($("#upload-drop"), settings);
		    });

		</script>
	</head>	

	<body>

		<div class="uk-block uk-block-muted" style="margin: 5px; padding: 5px;">
			<div id="upload-drop" class="uk-placeholder">
			    新增圖片<a class="uk-form-file uk-icon-button uk-icon-plus uk-icon-large"><input id="upload-select" type="file"></a>
				<div id="progressbar" class="uk-progress uk-hidden">
				    <div class="uk-progress-bar" style="width: 0%;"></div>
				</div>
			</div>
		</div>

	</body>
</html>

我想問的是..
我點擊後下面的process跑完100%就結束了~
甚麼錯誤也沒發生~
到我指定的路徑"./images"看..甚麼也沒有..
實體檔案沒有上傳成功...

我有進入開發者debugger..
沒有任何錯誤~
而且debugger到upload.js時~
裡面的變數也都有抓到檔案的相關訊息(大小、名稱...)

不懂為什麼傳不成功..= =

PS:我的伺服器為Apache+PHP
PS2:網頁相關的link與script都在我一開始附的網址內

king742171 iT邦新手 2 級 ‧ 2017-05-03 13:51:39 檢舉

補充:
連結檔案部分我少了幾個~這裡補上~
```

<link rel="stylesheet" href="css/components/placeholder.css">

<link rel="stylesheet" href="css/components/form-file.css">

<link rel="stylesheet" href="css/components/progress.css">
```

登入發表討論