Uploadify 是一個基于 jQuery 的文件上傳插件,支持多文件上傳。要實現多文件上傳,你需要按照以下步驟操作:
在你的 HTML 文件中,引入 jQuery 和 Uploadify 插件。你可以從官方網站下載 Uploadify 插件,或者使用 CDN 鏈接。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Uploadify 多文件上傳示例</title>
<!-- 引入 jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- 引入 Uploadify 插件 -->
<script src="path/to/uploadify.min.js"></script>
</head>
<body>
<!-- 你的上傳區域 -->
<input type="file" name="file_upload" id="file_upload">
<script>
// 你的 Uploadify 配置代碼將放在這里
</script>
</body>
</html>
在你的 HTML 文件中,添加一個 <script>
標簽,用于編寫 Uploadify 的配置代碼。在配置代碼中,設置 uploader
參數指向你的服務器端上傳腳本,并設置其他相關選項。
$(document).ready(function() {
$('#file_upload').uploadify({
'swf' : 'path/to/uploadify.swf',
'uploader' : 'path/to/your/server-side-upload-script.php',
'multi' : true, // 啟用多文件上傳
'queueSizeLimit' : 999, // 設置隊列大小限制
'simUploadLimit' : 1, // 設置同時上傳的文件數量限制
'onUploadStart' : function(file) {
console.log('開始上傳文件:' + file.name);
},
'onUploadSuccess' : function(file, response) {
console.log('文件上傳成功:' + file.name + ',響應:' + response);
},
'onUploadError' : function(file, reason) {
console.log('文件上傳失敗:' + file.name + ',原因:' + reason);
},
'onUploadComplete' : function(file) {
console.log('文件上傳完成:' + file.name);
}
});
});
你需要編寫一個服務器端腳本(例如 PHP、Python 或 Node.js 等),用于處理文件上傳請求。在這個腳本中,你需要檢查上傳的文件是否符合要求,將其保存到服務器上,并返回相應的響應。
以下是一個簡單的 PHP 示例:
<?php
if (!empty($_FILES['file_upload']['name'])) {
$target_dir = "uploads/";
$unique_filename = uniqid() . "_" . basename($_FILES["file_upload"]["name"]);
$target_file = $target_dir . $unique_filename;
if (move_uploaded_file($_FILES["file_upload"]["tmp_name"], $target_file)) {
echo "文件上傳成功:" . $_FILES["file_upload"]["name"];
} else {
echo "文件上傳失敗:" . $_FILES["file_upload"]["name"];
}
} else {
echo "沒有選擇文件";
}
?>
將以上代碼保存為 server-side-upload-script.php
,并將其放在與 Uploadify 插件相同的目錄下。現在,你應該可以正常使用 Uploadify 插件進行多文件上傳了。