fcup.js是一款支持图片文件切片上传插件。适用于手机移动端,使用配置简单明了,支持上传类型指定,支持自定义各种事件处理,进度条查看上传进度等功能。结合layui,bootstrap框架打造属于你的个性图片文件上传组件。
fcup上传插件扩展: 默认样式,旧版本样式,结合layui,结合bootstrap这4种上传实例。
使用方法:
1、head引入css文件
<!--预览框 进度条-->
<link rel="stylesheet" href="pintuer/pintuer.css">
2、head引入js文件
<script src="fcup/js/jquery.min.js"></script>
<script>
// 进度条
function Progress(value) {
$('#myProgress').css('width', value + '%');
}
function CloseDialog() {
$('#mydialog').hide();
}
</script>
3、body引入HTML代码
<!-- 弹出框 -->
<div style="position: fixed;width:100%;">
<div class="dialog-win" id="mydialog" style="z-index: 11; top: 10px;display: none;">
<div class="dialog open">
<div class="dialog-head">
<span class="close rotate-hover" onClick="CloseDialog()"></span><strong>图片预览</strong>
</div>
<div class="dialog-body">
<img src="" id="pic" class="img-responsive" alt="响应式图片" />
</div>
</div>
</div>
</div>
<button class="button bg-main button-big icon-arrow-circle-up" id="upid">立即上传</button>
<div class="progress progress-small">
<div class="progress-bar bg-yellow" id="myProgress" style="width: 0%;"></div>
</div>
<!-- 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: 'http://fcphp.cn/fcup/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) {
alert(msg);
$('#pic').attr("src", url);
$('#mydialog').show();
}
// 还在上传中
if (status == 1) {
console.log(msg);
}
// 接口返回错误
if (status == 0) {
// 停止上传并且提示信息
$.upStop(msg);
}
},
// 上传过程监听,可以根据当前执行的进度值来改变进度条
upEvent: function (num) {
// num的值是上传的进度,从1到100
Progress(num);
},
// 发生错误后的处理
upStop: function (errmsg) {
// 这里只是简单的alert一下结果,可以使用其它的弹窗提醒插件
alert(errmsg);
},
// 开始上传前的处理和回调,比如进度条初始化等
upStart: function () {
Progress(0);
$('#mydialog').hide();
alert('开始上传');
}
});
</script>