fcup.js是一款支持圖片文件切片上傳插件。適用于手機移動端，使用配置簡單明了,支持上傳類型指定，支持自定義各種事件處理，進(jìn)度條查看上傳進(jìn)度等功能。結(jié)合layui，bootstrap框架打造屬于你的個性圖片文件上傳組件。
fcup上傳插件擴展： 默認(rèn)樣式，舊版本樣式，結(jié)合layui，結(jié)合bootstrap這4種上傳實例。
使用方法：
1、head引入css文件
<!--預(yù)覽框 進(jìn)度條-->
<link rel="stylesheet" href="pintuer/pintuer.css">
2、head引入js文件
<script src="fcup/js/jquery.min.js"></script>
<script>
// 進(jìn)度條
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>圖片預(yù)覽</strong>
</div>
<div class="dialog-body">
<img src="" id="pic" class="img-responsive" alt="響應(yīng)式圖片" />
</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，默認(rèn)2M
upMaxSize: '20', //上傳文件大小,單位M，不設(shè)置不限制
upUrl: 'http://fcphp.cn/fcup/php/file.php', //文件上傳接口
upType: 'jpg,png,jpeg,gif', //上傳類型檢測,用,號分割
//接口返回結(jié)果回調(diào)，根據(jù)結(jié)果返回的數(shù)據(jù)來進(jìn)行判斷，可以返回字符串或者json來進(jìn)行判斷處理
upCallBack: function (res) {
// 狀態(tài)
var status = res.status;
// 信息
var msg = res.message;
// url
var url = res.url + "?" + Math.random();
// 已經(jīng)完成了
if (status == 2) {
alert(msg);
$('#pic').attr("src", url);
$('#mydialog').show();
}
// 還在上傳中
if (status == 1) {
console.log(msg);
}
// 接口返回錯誤
if (status == 0) {
// 停止上傳并且提示信息
$.upStop(msg);
}
},
// 上傳過程監(jiān)聽，可以根據(jù)當(dāng)前執(zhí)行的進(jìn)度值來改變進(jìn)度條
upEvent: function (num) {
// num的值是上傳的進(jìn)度，從1到100
Progress(num);
},
// 發(fā)生錯誤后的處理
upStop: function (errmsg) {
// 這里只是簡單的alert一下結(jié)果，可以使用其它的彈窗提醒插件
alert(errmsg);
},
// 開始上傳前的處理和回調(diào),比如進(jìn)度條初始化等
upStart: function () {
Progress(0);
$('#mydialog').hide();
alert('開始上傳');
}
});
</script>
