dianbaer / Anyupload
Licence: mit
anyupload是一个极度纯净的上传插件，通过简单调整就可以融入到任何项目，支持多文件上传、上传速率动态控制、真实进度监控kb/s、分块生成MD5、分块上传、MD5校验秒传、暂停、取消等。仅需1000行代码
Stars: ✭ 480
Programming Languages
javascript
184084 projects - #8 most used programming language
Labels
Projects that are alternatives of or similar to Anyupload
ic-firebase-uploader
This component is a multi-file uploader for firebase
Stars: ✭ 21 (-95.62%)
Mutual labels: uploader
uploadcare client
A flutter library for working with Uploadcare REST API. File uploads, media processing, and adaptive delivery for web and mobile.
Stars: ✭ 14 (-97.08%)
Mutual labels: uploader
React Dropzone Uploader
React file dropzone and uploader
Stars: ✭ 276 (-42.5%)
Mutual labels: uploader
ImagerJs
A JavaScript library for uploading images using drag & drop. Crop, rotate, resize, or shrink your image before uploading.
Stars: ✭ 101 (-78.96%)
Mutual labels: uploader
angular-material-datatransfer
A HTML5 datatransfer UI for handling upload and download of multiple simultaneous files.
Stars: ✭ 13 (-97.29%)
Mutual labels: uploader
ShareX-CDN
Basic image, text & file uploader CDN for ShareX
Stars: ✭ 22 (-95.42%)
Mutual labels: uploader
Dropit
DropIt is a File Uploader built with nodejs, Upload, get a link, and share your files with anyone easily.
Stars: ✭ 367 (-23.54%)
Mutual labels: uploader
URL-Magnet-Cloud-Uploader-Heroku
Aria 2 Rclone Remote URL /magnet Clouds upload via HEROKU
Stars: ✭ 99 (-79.37%)
Mutual labels: uploader
Katana
🚀 a powerful, open-source screenshot utility for macOS
Stars: ✭ 270 (-43.75%)
Mutual labels: uploader
ionic-image-upload
Ionic Plugin for Uploading Images to Amazon S3
Stars: ✭ 26 (-94.58%)
Mutual labels: uploader
Vue File Upload
vue.js ，vue-loader 上传文件，vue-file-upload，vue上传文件组件
Stars: ✭ 317 (-33.96%)
Mutual labels: uploader
youtube-upload-multi-videos
Youtube Uploader: auto upload multiple youtube videos 批量自动上传youtube视频
Stars: ✭ 38 (-92.08%)
Mutual labels: uploader
Xbackbone
A lightweight file manager with full ShareX, Screencloud support and more
Stars: ✭ 359 (-25.21%)
Mutual labels: uploader
Formvuelar
Vue form components with server-side validation in mind
Stars: ✭ 263 (-45.21%)
Mutual labels: uploader
anyupload
anyupload是一个极度纯净的上传插件，通过简单调整就可以融入到任何项目，支持多文件上传、上传速率动态控制、真实进度监控kb/s、分块生成MD5、分块上传、MD5校验秒传、暂停、取消等。
体验地址：
https://www.dianbaer.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;//等待时间
}
AnyUploadServer打包
ant
java服务器基于grain
依赖以下库，共（1429行，学习成本极低）
grain-httpserver.jar（1318行）
grain-log.jar（111行）
github：
https://github.com/dianbaer/grain
码云：
https://gitee.com/dianbaer/grain
js客户端基于juggle
最精简依赖以下库，共（614行，学习成本极低）
juggle-help.js（33行）
juggle-event.js（256行）
juggle-http.js（99行）
juggle-mv.js（104行）
juggle-juggler.js（122行）
github：
https://github.com/dianbaer/juggle
码云：
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].