JavaScript Uploadify文件上传实例
以下是一个使用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），用于接收并保存上传的文件。
阅读剩余
THE END
