anyupload

多功能上传插件
授权协议 MIT
开发语言 JavaScript
所属分类 Web应用开发、 文件上传组件
软件类型 开源软件
地区 国产
投 递 者 冉德元
操作系统 跨平台
开源组织
适用人群 未知
 软件概览

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;//等待时间
}
 相关资料
  • 本文向大家介绍JQuery fileupload插件实现文件上传功能,包括了JQuery fileupload插件实现文件上传功能的使用技巧和注意事项,需要的朋友参考一下 道理相通,我简单分享下在.net MVC下的实装。 1.制作Model类 2.实装controller里的对应方法,我这个处理逻辑比较复杂,懒得修改了,反正就这个意思 3.页面的实装 √,就是这个样子 还附赠了一个简易lodin

  • 本文向大家介绍asp.net uploadify实现多附件上传功能,包括了asp.net uploadify实现多附件上传功能的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了asp.net uploadify多附件上传的方法,供大家参考,具体内容如下 1、说明   uploadify是一款优秀jQuery插件,主要功能是批量上传文件。大多数同学对多附件上传感到棘手,现将asp.net

  • 本文向大家介绍PHP实现多图上传和单图上传功能,包括了PHP实现多图上传和单图上传功能的使用技巧和注意事项,需要的朋友参考一下 下面一段代码给大家介绍php实现单图上传和多图上传的功能,具体代码如下所示: 总结 以上所述是小编给大家介绍的PHP实现多图上传和单图上传功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对呐喊教程网站的支持!

  • 本文向大家介绍java实现多图片上传功能,包括了java实现多图片上传功能的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了java实现多图片上传功能的具体代码,供大家参考,具体内容如下 开发环境:jdk1.7,MyEclipse10 框架用的是spring。用到了maven工具(maven的包百度下就可以)。 四步完成,全部复制改参数就可以 第一步:先在Spring中对图片进行限制

  • 本文向大家介绍C#实现文件上传以及多文件上传功能,包括了C#实现文件上传以及多文件上传功能的使用技巧和注意事项,需要的朋友参考一下 一、前端搭建 1、前端用到js:uploadify(下载地址:http://www.uploadify.com/download/)、layer (下载地址:http://layer.layui.com/),下载之后把它们放在你的项目里 列如 2、根据你的需要在你项目

  • 我正在尝试使用@Controller和@Request estMap使用Spring 3.1.2上传多个文件。 下面是我做的和我的配置。 格式 : 控制器方法: 我的会议: 提交表单确实会转到添加文件系统映像方法。locId 参数的数据位于此处,但“文件”参数未绑定。无论我尝试过什么参数/字段名称/参数类型的组合,它都是系统性的空值。 HttpServletRequest参数是一个org.spri