这里基于 Bootstrap 方式构建.

首先新建一个 Html 空白页面.命名 FineUploderDemo.html.添加如下 CSS 引用如下:

   1:  <link href="static/css/fineuploader.css" rel="stylesheet">

   2:  <link href="static/css/bootstrap.min.css" rel="stylesheet">   

这两个文件时必须引用的 .fineuploader.css 则是对应下载 Fine Uploder 源码 Client 目录

下.fineuploder.css 提供 JS 脚本中所需的 CSS 样式，主要包括按钮的样式、进度显示的样式

以及上传结果的样式.添加 JavaScript 文件引用如下:

   1:  <script src="static/script/fineupload/header.js"></script>

   2:  <script src="static/script/fineupload/util.js"></script>

   3:  <script src="static/script/fineupload/button.js"></script>

   4:  <script src="static/script/fineupload/handler.base.js"></script>

   5:  <script src="static/script/fineupload/handler.form.js"></script>

   6:  <script src="static/script/fineupload/handler.xhr.js"></script>

   7:  <script src="static/script/fineupload/uploader.basic.js"></script>

   8:  <script src="static/script/fineupload/dnd.js"></script>

   9:  <script src="static/script/fineupload/uploader.js"></script>

其中 uploder.js 和 uploder.basic.js 则是前端的所有上传功能都在该脚本中实现.必须引用.

同时添加 client 目录下 processing 和 loading 两张进度显示所需要的动态图片.该图片都在

fineuploder.css 文件调用.

在 body 添加如下 Code:

   1:          <div id="bootstrapped-fine-uploader"></div>   

   2:          <script>

   3:              function createUploader() {

   4:                  var uploader = new qq.FineUploader({

   5:                      element: document.getElementById('bootstrapped-fine-uploader'),