以下是一個使用JavaScript和Uploadify插件實現文件上傳的示例代碼:
<!DOCTYPE html><html>
<head>
<title>Uploadify 文件上傳示例</title>
<!-- 引入jQuery庫 -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<!-- 引入Uploadify插件 -->
<link rel="stylesheet" type="text/css" href="uploadify.css">
<script src="jquery.uploadify.min.js"></script>
</head>
<body>
<h2>選擇文件并上傳</h2>
<input type="file" name="file_upload" id="file_upload">
<div id="fileQueue"></div>
<script type="text/javascript">
$(document).ready(function() {
// 初始化上傳插件
$('#file_upload').uploadify({
'swf': 'uploadify.swf', // 指定Uploadify的Flash文件路徑
'uploader': 'upload.php', // 指定服務器端處理上傳的腳本文件路徑
'buttonText': '選擇文件', // 上傳按鈕上的文字
'fileTypeExts': '*.jpg; *.png; *.gif', // 允許上傳的文件類型
'fileSizeLimit': '10MB', // 限制每個文件的大小
'multi': true, // 是否允許多文件上傳
'auto': true, // 是否自動上傳文件
'queueID': 'fileQueue', // 文件隊列的元素ID
'onUploadSuccess': function(file, data, response) {
// 上傳成功時的回調函數
alert('文件上傳成功!');
},
'onUploadError': function(file, errorCode, errorMsg) {
// 上傳失敗時的回調函數
alert('文件上傳失敗:' + errorMsg);
}
});
});
</script>
</body>
</html>
在上述示例中,我們引入了jQuery庫和Uploadify插件,并使用uploadify()方法初始化了一個文件上傳組件。其中,各個參數的意義如下:
swf: 指定Uploadify的Flash文件路徑。
uploader: 指定服務器端處理上傳的腳本文件路徑。
buttonText: 上傳按鈕上的文字。
fileTypeExts: 允許上傳的文件類型。
fileSizeLimit: 限制每個文件的大小。
multi: 是否允許多文件上傳。
auto: 是否自動上傳文件。
queueID: 文件隊列的元素ID。
onUploadSuccess: 上傳成功時的回調函數。
onUploadError: 上傳失敗時的回調函數。
你需要將以上代碼保存為一個HTML文件,并確保正確引入了Uploadify的JS和CSS文件。另外,你還需要編寫一個服務器端的處理上傳的腳本文件(例如upload.php),用于接收并保存上傳的文件。