关于“Uploadify上传文件方法”,以下是完整的攻略:
Uploadify上传文件方法
简介
Uploadify 是一个基于jQuery的文件上传组件,可以方便地实现文件的异步上传,支持多文件上传、队列顺序控制、进度条等功能。使用 Uploadify,可以很方便地在网页中实现文件上传功能。
使用步骤
1. 引入相关文件
在 HTML 页面中引入相关的文件:
<link rel="stylesheet" href="uploadify.css" type="text/css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="uploadify.js"></script>
2. 设置上传参数
在 jQuery 的 ready 函数中设置上传参数,例如:
$(function() {
$('#file_upload').uploadify({
'swf': 'uploadify.swf',
'uploader': 'uploadify.php'
});
});
其中,'swf' 属性指向 Uploadify 的 Flash 动画文件,'uploader' 属性指向服务器端的处理文件。其他可选参数还包括文件的类型、大小限制等。
3. 创建 HTML 元素
在页面中创建一个 HTML 元素来上传文件,例如:
<input type="file" name="file_upload" id="file_upload" />
其中,'name' 属性指定上传文件的表单名称,'id' 属性为该元素的唯一标识符。
4. 处理上传结果
在服务器端上传成功后,可以通过 Uploadify 的回调函数来处理上传结果:
<?php
if ($_FILES['file_upload']['error'] == UPLOAD_ERR_OK) {
$temp_name = $_FILES['file_upload']['tmp_name'];
$name = $_FILES['file_upload']['name'];
// 处理上传文件
}
?>
其中,'$_FILES' 是 PHP 内置的上传文件数组,包含上传文件的各种属性。
示例
示例一:上传图片文件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Uploadify Demo</title>
<link rel="stylesheet" href="uploadify.css" type="text/css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="uploadify.js"></script>
<script type="text/javascript">
$(function() {
$('#file_upload').uploadify({
'swf': 'uploadify.swf',
'uploader': 'uploadify.php',
'fileTypeExts': '*.jpg;*.png;*.gif',
'fileSizeLimit': '2MB',
'onUploadSuccess': function(file, data, response) {
alert('上传成功:' + file.name + '\n服务器端返回结果:' + data);
}
});
});
</script>
</head>
<body>
<h1>Uploadify Demo</h1>
<input type="file" name="file_upload" id="file_upload" />
</body>
</html>
<?php
if ($_FILES['file_upload']['error'] == UPLOAD_ERR_OK) {
$temp_name = $_FILES['file_upload']['tmp_name'];
$name = $_FILES['file_upload']['name'];
// 保存上传文件
move_uploaded_file($temp_name, 'uploads/' . $name);
echo 'uploads/' . $name;
}
?>
示例二:上传多个文件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Uploadify Demo</title>
<link rel="stylesheet" href="uploadify.css" type="text/css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="uploadify.js"></script>
<script type="text/javascript">
$(function() {
$('#file_upload').uploadify({
'swf': 'uploadify.swf',
'uploader': 'uploadify.php',
'multi': true,
'fileSizeLimit': '10MB',
'onUploadSuccess': function(file, data, response) {
alert('上传成功:' + file.name + '\n服务器端返回结果:' + data);
}
});
});
</script>
</head>
<body>
<h1>Uploadify Demo</h1>
<input type="file" name="file_upload" id="file_upload" />
</body>
</html>
<?php
if (isset($_FILES['file_upload'])) {
$files = $_FILES['file_upload'];
for ($i = 0; $i < count($files['name']); $i++) {
if ($files['error'][$i] == UPLOAD_ERR_OK) {
$temp_name = $files['tmp_name'][$i];
$name = $files['name'][$i];
// 保存上传文件
move_uploaded_file($temp_name, 'uploads/' . $name);
echo 'uploads/' . $name . "\n";
}
}
}
?>
这两个示例分别展示了如何上传图片文件和多个文件,其中上传成功后会弹出提示窗口显示上传文件的名称和服务器端返回的信息。在实际的应用中,可以根据具体需求自定义更多的上传参数和回调函数。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:Uploadify上传文件方法 - Python技术站