Public/Erpadmin/lib/webuploader-0.1.5/jekyll/getting-started.md

（开头部分） 7KB

这里只显示每个文件的开头 60 行。登录后可以解锁完整代码。

---
layout: post
title: 快速开始
name: Getting started
group: 'nav'
weight : 1,
styles:
  - /css/webuploader.css
scripts:
  - /js/webuploader.js
  - /js/getting-started.js
commentIssueId: 71
hideTitle: true
bannerTitle: Getting Started
bannerContents:
  - 结合简单例子，快速掌握使用方法。
---

## 引入资源

使用Web Uploader文件上传需要引入三种资源：JS, CSS, SWF。

```html
<!--引入CSS-->
<link rel="stylesheet" type="text/css" href="webuploader文件夹/webuploader.css">

<!--引入JS-->
<script type="text/javascript" src="webuploader文件夹/webuploader.js"></script>

<!--SWF在初始化的时候指定，在后面将展示-->
```
## 文件上传

WebUploader只包含文件上传的底层实现，不包括UI部分。所以交互方面可以自由发挥，以下将演示如何去实现一个简单的版本。

请点击下面的`选择文件`按钮，然后点击`开始上传`体验此Demo。

<div id="uploader" class="wu-example">
    <div id="thelist" class="uploader-list"></div>
    <div class="btns">
        <div id="picker">选择文件</div>
        <button id="ctlBtn" class="btn btn-default">开始上传</button>
    </div>
</div>

### Html部分
首先准备dom结构，包含存放文件信息的容器、选择按钮和上传按钮三个部分。

```html
<div id="uploader" class="wu-example">
    <!--用来存放文件信息-->
    <div id="thelist" class="uploader-list"></div>
    <div class="btns">
        <div id="picker">选择文件</div>
        <button id="ctlBtn" class="btn btn-default">开始上传</button>
    </div>
</div>
```

### 初始化Web Uploader
后面还有 201 行代码，解锁后查看完整代码

24 小时内免费解锁 3 个项目，之后 1 积分/个。 规则说明

AI 解读

登录后可用，每次 10 积分，解读结果公开显示在下面。

还没有人解读过这个文件。