CKFinder 是一個用于管理文件的插件,它提供了通過 Ajax 進行文件操作的功能。要實現文件同步,你可以使用 CKFinder 的文件上傳和下載功能。以下是一個簡單的示例,說明如何使用 CKFinder 的 Ajax 功能進行文件同步。
首先,確保你已經在項目中引入了 CKFinder 的相關文件。你可以從 CKFinder 官網下載并引入所需的文件。
在 HTML 文件中,創建一個用于顯示文件列表的容器:
<div id="fileList"></div>
function fetchFileList() {
$.ajax({
url: 'path/to/ckfinder/connector.php', // CKFinder 連接器文件的路徑
type: 'GET',
dataType: 'json',
success: function(data) {
var fileList = '';
$.each(data.files, function(index, file) {
fileList += '<p>' + file.name + '</p>';
});
$('#fileList').html(fileList);
},
error: function() {
alert('Error fetching file list.');
}
});
}
function uploadFile(file) {
$.ajax({
url: 'path/to/ckfinder/connector.php', // CKFinder 連接器文件的路徑
type: 'POST',
dataType: 'json',
data: new FormData($('#uploadForm')[0]),
processData: false,
contentType: false,
success: function(data) {
if (data.error) {
alert('Error uploading file: ' + data.error);
} else {
fetchFileList(); // 上傳成功后,刷新文件列表
}
},
error: function() {
alert('Error uploading file.');
}
});
}
<form id="uploadForm" enctype="multipart/form-data">
<input type="file" name="upload[]" multiple>
<button type="button" onclick="uploadFile($(this).prev('input[type="file"]'))">Upload</button>
</form>
fetchFileList()
函數以初始化文件列表。現在,當用戶選擇文件并點擊上傳按鈕時,文件將通過 Ajax 上傳到服務器。上傳成功后,文件列表將更新以顯示新上傳的文件。這樣,你就實現了基本的文件同步功能。你可以根據需要擴展此示例,以實現更復雜的文件同步需求。