多文件上传插件——anyupload.js

最新推荐文章于 2024-05-18 16:25:44 发布

juan9872

最新推荐文章于 2024-05-18 16:25:44 发布

阅读量233

点赞数 5

文章标签： json

本文链接：https://blog.csdn.net/juan9872/article/details/138142978

版权

多文件上传插件——anyupload.js

anyupload是一个极度纯净的上传插件, 通过简单调整就可以融入到任何项目, 支持多文件上传、上传速率动态控制、真实进度监控kb/s、分块生成MD5、分块上传、MD5校验秒传、暂停、取消等。

https://github.com/dianbaer/anyupload

体验地址：

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（示例启动项目）

使用方法:

<!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>

juan9872

关注

5
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
多文件上传插件——anyupload.js

anyupload是一个极度纯净的上传插件, 通过简单调整就可以融入到任何项目, 支持多文件上传、上传速率动态控制、真实进度监控kb/s、分块生成MD5、分块上传、MD5校验秒传、暂停、取消等。|--anyupload（anyupload文件夹）|--spark-md5.js（用于分块计算md5）|--dist（anyupload js打包版本）|--src（anyupload js未打包版本）|--FileConfig.js（配置）|--lib（依赖js）|--js（js库）
复制链接

扫一扫