移動端fcup圖片文件上傳插件

使用方法：

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) {

         // 狀態(tài)
         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);
         }
      },

      // 上傳過程監(jiān)聽，可以根據當前執(zhí)行的進度值來改變進度條
      upEvent: function (num) {
         // num的值是上傳的進度，從1到100
         Progress(num);
      },

      // 發(fā)生錯誤后的處理
      upStop: function (errmsg) {
         // 這里只是簡單的alert一下結果，可以使用其它的彈窗提醒插件
         alert(errmsg);
      },

      // 開始上傳前的處理和回調,比如進度條初始化等
      upStart: function () {
         Progress(0);
         $('#mydialog').hide();
         alert('開始上傳');
      }

   });
</script>