- 授权协议: MIT
- 开发语言: JavaScript
- 操作系统: 跨平台
- 软件首页: https://gitee.com/dianbaer/anyupload
- 软件文档: https://gitee.com/dianbaer/anyupload
软件介绍
anyupload 是一个极度纯净的上传插件，通过简单调整就可以融入到任何项目，支持多文件上传、上传速率动态控制、真实进度监控 kb/s 、分块生成 MD5 、分块上传、MD5 校验秒传、暂停、取消等。
体验地址：
https://www.threecss.com/AnyUploadClient/
项目目录结构：
AnyUploadClient（1000行代码）
|--js（js库） |--anyupload（anyupload文件夹） |--css（anyupload css） |--dist（anyupload js打包版本） |--images（anyupload image） |--src（anyupload js未打包版本） |--FileConfig.js（配置） |--lib（依赖js） |--jquery.min.js ###################################### |--juggle-all.js（解耦合的工具库ALL IN ONE：https://github.com/dianbaer/juggle） 或 |--juggle-help.js |--juggle-event.js |--juggle-juggler.js （解耦合的工具库small require：https://github.com/dianbaer/juggle） |--juggle-http.js |--juggle-mv.js ###################################### |--spark-md5.js（用于分块计算md5） |--index.html（示例启动项目）
AnyUploadServer（899行代码）
|--src（服务器代码） |--CommonConfig.java（配置） |--protobuf（消息包生成工具）
AnyUploadClient怎么使用：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--juggle库 all in one-->
<!--
<script src="js/lib/juggle-all.js" type="text/javascript"></script>
-->
<!--juggle库 small require-->
<script src="js/lib/juggle-help.js" type="text/javascript"></script>
<script src="js/lib/juggle-event.js" type="text/javascript"></script>
<script src="js/lib/juggle-juggler.js" type="text/javascript"></script>
<script src="js/lib/juggle-http.js" type="text/javascript"></script>
<script src="js/lib/juggle-mv.js" type="text/javascript"></script>
<!--分块生成md5-->
<script src="js/lib/spark-md5.js" type="text/javascript"></script>
<script src="js/lib/jquery.min.js" type="text/javascript"></script>
<link href='js/anyupload/css/anyupload.css' rel='stylesheet' type='text/css'/>
<!--anyupload库-->
<script src="js/anyupload/dist/anyupload.js" type="text/javascript"></script>
</head>
<script type="text/javascript">
var fileMediator;
/**
* 选择文件时的响应
* @param e
*/
var uploadFileButtonChange = function (e) {
if (!("FileReader" in window) || !("File" in window)) {
alert("您的浏览器不支持html5，请使用google，firefox，ie10等浏览器");
return;
}
var files = e.target.files;
//调用anyupload上传函数
fileMediator.upLoadFile(files);
//清空上传按钮的内容
$("#uploadFileButton").val("");
};
window.onload = function () {
/****初始化anyupload开始*****/
fileMediator = new anyupload.FileMediator();
//设置anyupload的容器对象
fileMediator.initView($("#anyUploadContainer"));
//设置anyupload的上传地址
anyupload.uploadFileProxy.url = "http://localhost:8080/AnyUploadServer/s";
/****初始化anyupload结束*****/
$("#uploadFileButton").on("change", uploadFileButtonChange);
}
</script>
<body>
<!--上传按钮-->
<input type="file" class="myFile_PJY" multiple="multiple" id="uploadFileButton"
style="margin-left: 50px;margin-top: 20px"/>
<!--anyupload容器div-->
<div id="anyUploadContainer" style="width: 800px;margin-top: 50px;"></div>
</body>
</html>AnyUploadClient js源码打包
cd AnyUploadClient/js/anyupload npm install -g grunt-cli npm install grunt
AnyUploadServer怎么使用
如果测试，直接启动AnyUploadServer即可，不需要修改配置
如果融入其他项目，按照AnyUploadServer代码示例需要提供两个接口
message MD5CheckC{
string hOpCode=1;
string fileBaseMd5=2;//md5
string userFileName=3;//文件名
string userFoldParentId=4;//父类文件夹id
int64 fileBaseTotalSize=5;//文件总大小
string userFileId=6;//文件id
}
message MD5CheckS{
string hOpCode=1;
int32 result=2;//结果1：秒传，2：可以上传
int64 fileBasePos=3;//开始位置
int32 uploadMaxLength=4;//一次上传最大长度
string userFileId=5;//文件id
}
message UploadFileC{
string hOpCode=1;
string userFileId=2;//文件id
int64 fileBasePos=3;//开始位置
int32 uploadLength=4;//上传的长度
}
message UploadFileS{
string hOpCode=1;
int32 result=2;//结果1：秒传，2：可以上传，3上传完成
int64 fileBasePos=3;//开始位置
int32 uploadMaxLength=4;//一次上传最大长度
string userFileId=5;//文件id
int32 waitTime=6;//等待时间
}
HTTP Essentials
Stephen A. Thomas、Stephen Thomas / Wiley / 2001-03-08 / USD 34.99
The first complete reference guide to the essential Web protocol As applications and services converge and Web technologies not only assume HTTP but require developers to manipulate it, it is be......一起来看看 《HTTP Essentials》 这本书的介绍吧!
