jQuery Uploadify是一個基于jQuery的多文件上傳插件,用于方便地實現多文件上傳功能。
使用步驟如下:
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="uploadify/jquery.uploadify.js"></script>
<link rel="stylesheet" type="text/css" href="uploadify/uploadify.css">
<input type="file" name="file_upload" id="file_upload" />
<div id="queue"></div>
$(function() {
$("#file_upload").uploadify({
'swf': 'uploadify/uploadify.swf',
'uploader': 'upload.php',
'buttonText': '選擇文件',
'fileObjName': 'file',
'fileSizeLimit': '10MB',
'fileTypeExts': '*.jpg; *.jpeg; *.gif; *.png',
'formData': {'timestamp': '<?php echo time();?>',
'token': '<?php echo md5('unique_salt' . time());?>'},
'onUploadSuccess': function(file, data, response) {
alert('文件' + file.name + '上傳成功!');
},
'onUploadError': function(file, errorCode, errorMsg, errorString) {
alert('文件' + file.name + '上傳失敗: ' + errorMsg);
}
});
});
上述代碼中,參數說明如下:
swf
: Flash文件路徑,用于在不支持HTML5的瀏覽器中實現文件上傳。uploader
: 服務端處理上傳的腳本路徑。buttonText
: 上傳按鈕上顯示的文本。fileObjName
: 上傳的文件字段名。fileSizeLimit
: 限制文件大小的最大值。fileTypeExts
: 允許上傳的文件類型。formData
: 隨文件一起發送到服務器的額外數據。onUploadSuccess
: 上傳成功時的回調函數。onUploadError
: 上傳失敗時的回調函數。Uploadify插件會將文件通過POST請求發送到服務器端,服務器端需要接收并處理這些文件。在示例代碼中,上傳腳本路徑為upload.php
,你需要根據自己的需求來編寫這個腳本,通常會使用一些服務器端語言如PHP、Python、Ruby等來處理文件上傳。
以上就是使用jQuery Uploadify插件實現多文件上傳的基本步驟。具體的使用還可以根據自己的需求來進行參數配置和樣式調整。