分類
<!--預覽框 進度條--> <link rel="stylesheet" href="pintuer/pintuer.css">
<script src="fcup/js/jquery.min.js"></script>
<script>
// 進度條
function Progress(value) {
$('#myProgress').css('width', value + '%');
}
function CloseDialog() {
$('#mydialog').hide();
}
</script>
<!-- 彈出框 -->
<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>
1. 本站所有素材(未指定商用),僅限學習交流。
2. 會員在本站下載的原創商用和VIP素材后,只擁有使用權,著作權歸原作者及17素材網所有。
3. 原創商用和VIP素材,未經合法授權,請勿用于商業用途,會員不得以任何形式發布、傳播、復制、轉售該素材,否則一律封號處理。
4. 本平臺織夢模板僅展示和個人非盈利用途,織夢系統商業用途請預先授權。