移动端fcup图片文件上传插件

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>

文件目录

本资源来自：代码 » 其他特效 » 移动端fcup图片文件上传插件

注：此资源非帝国CMS模板/特效/源码，需要帝国CMS整站模板源码的小伙伴，请移步 帝国CMS模板，感谢支持！