https://github.com/rwson/uploader
an upload plugin,support HTML5(drag&drop) and iframe
https://github.com/rwson/uploader
Last synced: 3 months ago
JSON representation
an upload plugin,support HTML5(drag&drop) and iframe
- Host: GitHub
- URL: https://github.com/rwson/uploader
- Owner: rwson
- Created: 2016-08-23T14:31:32.000Z (almost 10 years ago)
- Default Branch: master
- Last Pushed: 2017-05-04T09:19:48.000Z (about 9 years ago)
- Last Synced: 2025-12-25T13:02:25.709Z (7 months ago)
- Language: JavaScript
- Homepage:
- Size: 25.4 KB
- Stars: 3
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
### Uploader
HTML5和iframe上传插件
---
- iframe(类Ajax)上传
参数:
| 名称 | 意义 | 类型 |
| --------- | ------------------- | -------------------- |
| type | 上传方法 | String(固定"iframe") |
| uploadUrl | 服务器端用于处理上传请求的地址 | String |
| data | 自定义数据 | Object |
| timeout | 超时时间(毫秒,-1为不指定超时时间) | Number |
| cssClass | 控制样式的CSS类 | Array.<String> |
| onStart | 开始上传回调 | Function |
| onSuccess | 上传成功回调 | Function |
| onError | 上传失败回调 | Function |
| onTimeout | 上传超时回调 | Function |
注:
1. data最后会被当成input\[type="hidden"\](key对应input的name属性,value对应input的值)提交,一旦data不为一个空对象,则需要后端来接收,否则没有意义
2. onTimeout和(onSuccess/onError)互斥,只能执行其中一个或两个
完整的调用例子:
HTML:
```html
```
JavaScript:
```javascript
Uploader("#Uploader", {
"uploadUrl": "/upload/iframe",
"type": "iframe",
"data": {
"key": "1",
"key2": "1",
"maxSize": 1000
},
"timeout": 3000,
"cssClass": ["upload-style1", "upload-style2"],
"onSuccess": function(res) {
console.log(res);
var img = new Image();
img.src = res.url;
img.onload = function() {
document.body.appendChild(img);
};
},
"onError": function(ex) {
console.log(ex);
},
"onTimeout": function(){
alert("超时啦!");
}
});
```
- HTML5(通过Ajax给后端POST表单数据,可一次性拖拽上传多个文件)上传
参数:
| 名称 | 意义 | 类型 |
| ---------- | ------------------- | -------------------- |
| type | 上传方法 | String(固定"HTML5") |
| uploadUrl | 服务器端用于处理上传请求的地址 | String |
| data | 自定义数据 | Object |
| timeout | 超时时间(毫秒,-1为不指定超时时间) | Number |
| cssClass | 控制上传框样式的CSS类 | Array.<String> |
| tipClass | 控制上传提示文字样式的CSS类 | Array.<String> |
| onStart | 开始上传回调 | Function |
| onProgress | 上传中回调 | Function |
| onSuccess | 上传成功回调 | Function |
| onError | 上传失败回调 | Function |
| onLoad | 完成回调 | Function |
注:
1. data最后会被当成普通表单提交(key对应input的name属性,value对应input的值)提交,一旦data不为一个空对象,则需要后端来接收,否则没有意义
2.相关回调执行顺序:onStart -> onProgress -> onSuccess/onError -> onLoad
完整的调用例子:
HTML:
```html
```
JavaScript:
```javascript
Uploader("#uploadHTML5", {
"uploadUrl": "/upload/html5",
"type": "HTML5",
"data": {
"test": "1111",
"maxSize": 1000
},
"styleClass": ["upload-html5"],
"tipClass": ["upload-tip"],
"onSuccess": function(res) {
res.files.forEach(function(item) {
var img = document.createElement("img");
img.src = item.url;
document.body.appendChild(img);
});
},
"onError": function(ex) {
console.log(ex);
},
"onProgress": function(ev) {
console.log(ev);
},
"onLoad": function(ev) {
console.log(ev);
}
});
```
本插件几乎不带内置CSS,可以通过配置项中的styleClass和tipClass传入具体的css类名,根据UI出的设计稿自行定义样式😄