anyupload_一个极度纯净的上传插件

Web前端开发网

fly63.com

首页资源工具文章教程栏目

anyupload

GitHub:https://github.com/dianbaer/anyupload

网站描述:一个极度纯净的上传插件

GitHub

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"
       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;//等待时间
}

仅供个人学习参考/导航指引使用，具体请以第三方网站说明为准，本站不提供任何专业建议。如果地址失效或描述有误，请联系站长反馈～感谢您的理解与支持！

链接: https://fly63.com/nav/2710