jQuery 附件管理器是一種方便的工具,可以大大簡化網(wǎng)站中的附件管理。它使用 jQuery 和 AJAX 技術(shù),讓您輕松地上傳和刪除文件,并且可以輕松地處理多個文件同時上傳的情況。
使用 jQuery 附件管理器非常簡單。首先,您需要在 HTML 中添加一個文件上傳表單。例如:
<form id="upload-form" action="upload.php" method="post" enctype="multipart/form-data"> <input type="file" name="file[]" multiple="multiple" /> <input type="button" id="upload-btn" value="Upload" /> </form>
然后,您需要添加一些 jQuery 代碼,用于處理文件上傳和刪除。例如:
$(document).ready(function() { $('#upload-btn').on('click', function() { var files = $('#upload-form input[type=file]').get(0).files; var formData = new FormData(); for (var i = 0; i< files.length; i++) { formData.append('file[]', files[i]); } $.ajax({ url: 'upload.php', type: 'POST', data: formData, processData: false, contentType: false, success: function(response) { $('#file-list').append(response); } }); }); $(document).on('click', '.delete-btn', function() { var fileId = $(this).data('id'); $.ajax({ url: 'delete.php', type: 'POST', data: { id: fileId }, success: function(response) { $('#file-' + fileId).remove(); } }); }); });
上述代碼中,我們在文件上傳表單中使用了多個文件選擇器。然后,在提交表單時,我們將所有文件添加到 FormData 對象中,使用 AJAX post 將數(shù)據(jù)發(fā)送到 upload.php 腳本。upload.php 腳本將文件保存在服務(wù)器上,并返回一個文件列表。我們使用 jQuery 的 success 函數(shù),將返回的文件列表附加到文件列表中。
接下來,我們添加了一個簡單的刪除按鈕。當(dāng)用戶單擊刪除按鈕時,我們將文件 ID 發(fā)送到 delete.php 腳本進行刪除。delete.php 腳本將刪除文件,并返回成功消息。我們使用 jQuery 的 success 函數(shù),將已刪除文件的條目從文件列表中刪除。