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

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

收藏
移动端fcup图片文件上传插件
fcup.js是一款支持图片文件切片上传插件。适用于手机移动端,使用配置简单明了,支持上传类型指定,支持自定义各种事件处理,进度条查看上传进度等功能。结合layui,bootstrap框架打造属于你的个性图片文件上传组件。 fcup上传插件扩展: 默认样式,旧版本样式,结合layui,结合bootstrap这4种上传实例。
  • 软件 Dreamweaver
  • 格式 HTML
  • 作者 I想要
  • 上传时间 6年前

使用方法:

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>

使用声明

1. 本站所有素材(未指定商用),仅限学习交流请勿用于商业用途。
2. 会员在本站下载的原创商用和VIP素材后,只拥有使用权,著作权归原作者及17素材网所有。
3. 原创商用和VIP素材,未经合法授权,会员不得以任何形式发布、传播、复制、转售该素材,否则一律封号处理。
4. 本平台织梦模板仅展示和个人非盈利用途,织梦系统商业用途请预先授权。