Score
0
Watch 44 Star 146 Fork 29

封尘 / fcupJavaScriptApache-2.0

Create your Gitee Account
Explore and code with more than 5 million developers,Free private repositories !:)
Sign up
fcup是一款支持大文件切片上传插件。该jquery插件使用简单,配置简单明了,支持上传类型指定,进度条查看上传进度,现有支持php的接口案例! spread retract

http://fcphp.cn/fcup

  • HTML 52.1%
  • JavaScript 42.4%
  • PHP 5.3%
  • Batchfile 0.2%
Clone or download
layui.html 4.04 KB
Copy Edit Web IDE Raw Blame History
封尘 authored 2019-10-22 15:00 . 更新案例和说明
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>jquery文件切片上传插件-fcup.js-layui框架案例</title>
<meta name="keywords" content="fcup.js,大文件上传,分段上传,h5上传,jquery上传插件,切片上传" />
<meta name="description" content="fcup.js是一款支持大文件切片上传jquery插件,使用简单方便,功能强大" />
<link rel="stylesheet" type="text/css" href="//layui.hcwl520.com.cn/layui/css/layui.css?v=201811010202" />
<link href="https://cdn.bootcss.com/layer/2.3/skin/layer.css" rel="stylesheet">
<!-- jquery -->
<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
<style>
body {
width: 100%;
height: 100%;
}
#center {
position: absolute;
top: 0;
width: 100%;
margin:0 auto;
}
#bg {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: -1;
filter: alpha(opacity=50);
-moz-opacity: 0.4;
-khtml-opacity: 0.4;
opacity: 0.4;
}
#bg>img {
height: 100%;
width: 100%;
border: 0;
}
</style>
</head>
<body>
<div id="bg">
<img id="bgpic" src="http://bizhi.lovefc.cn/images/save/20181217/323795.jpg" />
</div>
<div style="margin:250px auto;text-align: center;">
<!-- 上传按钮 -->
<button type="button" class="layui-btn layui-btn-lg" id="upid">
<i class="layui-icon">&#xe67c;</i>上传图片
</button>
<!-- 进度条 -->
<div id="center">
<div class="layui-progress" lay-showpercent="true" lay-filter="demo">
<div class="layui-progress-bar layui-bg-red" lay-percent="0%"></div>
</div>
</div>
</div>
</body>
<script src="//layui.hcwl520.com.cn/layui/layui.js?v=201811010202"></script>
<script src="https://cdn.bootcss.com/layer/2.3/layer.js"></script>
<script type="text/javascript">
layui.use(['element'], function () {
var $ = layui.jquery,
element = layui.element;
window.Progress = function (n) {
element.progress('demo', n + '%');
}
});
</script>
<!-- fcup.js -->
<script src="./fcup/js/jquery.fcup.js"></script>
<script>
$.fcup({
upId: 'upid', //上传dom的id
upShardSize: '0.1', //切片大小,(单次上传最大值)单位M,默认2M
upMaxSize: '20', //上传文件大小,单位M,不设置不限制
upUrl: './php/file.php', //文件上传接口
upType: 'jpg,png,jpeg,gif', //上传类型检测,用,号分割
//接口返回结果回调,根据结果返回的数据来进行判断,可以返回字符串或者json来进行判断处理
upCallBack: function (res) {
// 状态
var status = res.status;
// 信息
var msg = res.message;
// url
var url = res.url + "?" + Math.random();
// 已经完成了
if (status == 2) {
layer.msg(msg);
document.getElementById('bgpic').src = url;
}
// 还在上传中
if (status == 1) {
console.log(msg);
}
// 接口返回错误
if (status == 0) {
// 停止上传触发$.upStop函数
$.upErrorMsg(msg);
}
// 已经上传过了
if (status == 3) {
Progress(100);
document.getElementById('bgpic').src = url;
$.upErrorMsg(msg);
}
},
// 上传过程监听,可以根据当前执行的进度值来改变进度条
upEvent: function (num) {
// num的值是上传的进度,从1到100
Progress(num);
},
// 发生错误后的处理
upStop: function (errmsg) {
// 这里只是简单的alert一下结果,可以使用其它的弹窗提醒插件
layer.msg(errmsg);
},
// 开始上传前的处理和回调,比如进度条初始化等
upStart: function () {
Progress(0);
layer.msg('开始上传');
}
});
</script>
<script type="text/javascript" src="https://js.users.51.la/19663859.js"></script>
</html>

Comment ( 0 )

Sign in for post a comment

JavaScript
1
https://gitee.com/lovefc/fcup.git
git@gitee.com:lovefc/fcup.git
lovefc
fcup
fcup
master

Search