anyupload 介绍
anyupload是一个极度纯净的上传插件,通过简单调整就可以融入到任何项目,支持多文件上传、上传速率动态控制、真实进度监控kb/s、分块生成MD5、分块上传、MD5校验秒传、暂停、取消等。仅需1000行代码
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"margin-left: 50px;margin-top: 20px"/><!--anyupload容器div--><div id="anyUploadContainer" 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;//等待时间
}
GitHub:https://github.com/dianbaer/anyupload
网站描述:一个极度纯净的上传插件
anyupload
小编说
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。