# 文件上传
上传除图片外的其他文件资源。
>上传图片建议使用图片上传组件,图片组件可以提供图片预览功能。
[TOC]
## 组件参数
下面介绍上传时可定义的参数
| 属性 | 说明 | 示例|
| --- | --- |--- |
| width | 弹窗宽度 | width:'100%'
| extensions | 可使用扩展名 |extensions: 'doc,ppt,wps,zip,txt,jpg,jpeg,png,gif'|
| fileSizeLimit | 允许上传文件总大小(字节) | fileSizeLimit: 200 * 1024 * 1024 , 默认200MB |
| fileSingleSizeLimit | 允许上传单个文件大小(字节) | fileSingleSizeLimit: 20 * 1024 * 1024,默认5MB |
|data|POST数据|data:{name:'后盾人',year:2099}|
|server| 后台上传地址|默认为hdjs的window.hdjs.uploader 配置项|
## 使用示例
![](https://box.kancloud.cn/9d5f01e340577e30b95869f0f1cb0e0b_1436x786.png)
```
<button onclick="upFile(this)" class="btn btn-default" type="button">选择文件</button>
<script>
require(['hdjs']);
//上传图片
function upFile() {
require(['hdjs'], function (hdjs) {
var options = {
extensions: 'txt,php',
//data是向后台服务器提交的POST数据
data:{name:'后盾人',year:2099},
//单个文件允许为5MB
fileSingleSizeLimit:5 * 1024 * 1024
};
hdjs.file(function (files) {
//上传成功的文件,数组类型
console.log(files);
}, options)
});
}
</script>
```
- 文档已经迁移到后盾人
- 基础知识
- 项目介绍
- 安装配置
- 日期时间
- 日期选择
- 列表框日期
- 日期区间
- 时间选择
- moment
- 上传处理
- 初始配置
- 图片上传
- 文件上传
- 消息通知
- 消息通知
- Bootstrap消息
- izitoast
- SweetAlert
- 模态框
- 表单管理
- 异步请求
- 表单提交
- 表单验证
- 扩展组件
- GET参数
- 剪贴板
- 表情选择
- 图表
- 拾色器
- 二维码生成
- 光标控制
- 数据验证
- md5
- 设备检测
- Loading
- 预览图片
- 图标库
- COOKIE
- 百度地图
- 城市选择
- Vue.js
- jQuery
- axios
- 播放器
- 幻灯片
- 代码高亮
- 阿里云OSS
- 验证码
- 页面滚动
- lodash
- momentjs
- markdownIt
- 元素页面固定
- 编辑器
- ueditor
- editor.md
- SimpleMDE
- simditor
- 自定义组件
- 1.0(旧版)
- 基础知识
- 作者向军
- 安装配置
- 查看效果
- 元素样式
- 日期时间
- 日期选择
- 日期区间
- 时间选择
- moment
- 上传处理
- 图片上传
- 文件上传
- 后台处理
- 模态消息
- 模态
- notify
- bootstrap
- 表单管理
- 表单提交
- 表单验证
- 表单样式
- 扩展组件
- 自定义组件
- get参数
- 剪贴板
- 表情选择
- 图表
- 拾色器
- 二维码生成
- 光标控制
- 数据验证
- MD5
- loading
- 预览图片
- 图标库
- COOKIE
- 百度地图
- 城市选择
- Vuejs
- jQuery
- 播放器
- 幻灯片
- axios
- 代码高亮
- 阿里云OSS
- 验证码
- 正则表达式
- 工具函数
- 编辑器
- 百度编辑器
- markdown
- simplemde-markdow