jQuery File Upload 项目教程
1. 项目的目录结构及介绍
jQuery File Upload 项目的目录结构如下:
/jQueryFileUpload
├── css
│ └── style.css
├── img
│ └── loading.gif
├── js
│ ├── jquery.fileupload.js
│ ├── jquery.fileupload-ui.js
│ └── jquery.iframe-transport.js
├── server
│ ├── php
│ │ ├── index.php
│ │ └── UploadHandler.php
│ └── test
│ └── index.html
├── index.html
└── README.md
目录结构介绍
- css: 包含项目的样式文件。
style.css
: 主要的样式文件。
- img: 包含项目所需的图片资源。
loading.gif
: 加载动画图片。
- js: 包含项目的 JavaScript 文件。
jquery.fileupload.js
: 核心文件上传插件。jquery.fileupload-ui.js
: 用户界面相关的文件上传插件。jquery.iframe-transport.js
: 通过 iframe 进行文件传输的插件。
- server: 包含服务器端代码。
- php: PHP 服务器端代码。
index.php
: 主文件上传处理页面。UploadHandler.php
: 文件上传处理类。
- test: 测试文件。
index.html
: 测试页面。
- php: PHP 服务器端代码。
- index.html: 项目的主页面。
- README.md: 项目的说明文档。
2. 项目的启动文件介绍
项目的启动文件是 index.html
。这个文件包含了 jQuery File Upload 的基本配置和初始化代码。
index.html 文件内容概览
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>jQuery File Upload Example</title>
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery.min.js"></script>
<script src="js/jquery.fileupload.js"></script>
<script src="js/jquery.fileupload-ui.js"></script>
<script src="js/jquery.iframe-transport.js"></script>
</head>
<body>
<input id="fileupload" type="file" name="files[]" data-url="server/php/" multiple>
<script>
$(function () {
$('#fileupload').fileupload({
dataType: 'json',
done: function (e, data) {
$.each(data.result.files, function (index, file) {
$('<p/>').text(file.name).appendTo(document.body);
});
}
});
});
</script>
</body>
</html>
启动文件功能介绍
- 引入必要的文件:
index.html
引入了样式文件style.css
和 JavaScript 文件jquery.min.js
,jquery.fileupload.js
,jquery.fileupload-ui.js
,jquery.iframe-transport.js
。 - 文件上传输入框: 包含一个文件上传输入框,设置了
data-url
属性指向服务器端处理文件上传的 PHP 文件。 - 初始化文件上传插件: 使用 jQuery 选择器选中文件上传输入框,并调用
fileupload
方法进行初始化。
3. 项目的配置文件介绍
项目的配置文件主要位于 server/php/UploadHandler.php
。这个文件定义了文件上传的处理逻辑和配置选项。
UploadHandler.php 文件内容概览
class UploadHandler {
protected $options;
function __construct($options = null) {
$this->options = array(
'script_url' => $this->getFullUrl().'/'.basename(__FILE__),
'upload_dir' => dirname($this->getServerVar('SCRIPT_FILENAME')).'/files/',
'upload_url' => $this->getFullUrl().'/files/',
'param_name' => 'files',
// 其他配置选项...
);
if ($options) {