JS上传组件FileUpload自定义模板的使用方法


Posted in Javascript onMay 10, 2016

FileUpload 是国外一个纯javascript 写的大文件上传组件,该组件支持分片上传,断点续传,多文件等功能。
下面就为大家分享FileUpload上传组件自定义模板(FineUploaderBasic)的使用方法:

以下是配置代码:

前端配置:

<!--定义按钮-->
<div id="basic_uploader_fine"><i class="icon-upload icon-white"></i>选择文件</div>
<div id="triggerUpload">点击上传</div>
<!--显示信息-->
<div id="messages"></div>
<div id="cancelUpload" class="buttons">取消</div>
<div id="cancelAll" class="buttons">取消全部</div>
<div id="pauseUpload" class="buttons">暂停上传</div>
<div id="continueUpload" class="buttons">继续上传</div>
<script>
 $(document).ready(function() {
 $fub = $('#basic_uploader_fine');
 $messages = $('#messages');

 var uploader = new qq.FineUploaderBasic({
  debug: true,  // 开启调试模式
  multiple: true, // 多文件上传
  button: $fub[0], //上传按钮
  autoUpload: false, //不自动上传则调用uploadStoredFiless方法 手动上传
  // 验证上传文件
  validation: { 
   allowedExtensions: ['jpeg', 'jpg', 'png', 'zip' , 'rar'],
  }, 
  // 远程请求地址(相对或者绝对地址)
  request: {
   endpoint: 'server/endpoint.php'
  },
  retry: {
   enableAuto: false // defaults to false 自动重试
  }, 
  chunking: {
   enabled: true,
   partSize: 500, // 分组大小,默认为 2M
   concurrent: {
    enabled: true // 开启并发分组上传,默认并发3个
   },
   success: {
    endpoint: "server/endpoint.php?done" // 分组上传完成后处理
   }
  },
  //回调函数
  callbacks: {
  //文件开始上传
  onSubmit: function(id, fileName) {
   $messages.append('<div id="file-' + id + '" class="alert" style="margin: 20px 0 0">'+fileName+'</div>');
  },
  onUpload: function(id, fileName) {
   $('#file-' + id).addClass('alert-info')
       .html('<img src="client/loading.gif" alt="Initializing. Please hold."> ' +
        'Initializing ' +
        '“' + fileName + '”');
  },
  //进度条
  onProgress: function(id, fileName, loaded, total) {
   if (loaded < total) {
   progress = Math.round(loaded / total * 100) + '% of ' + Math.round(total / 1024) + ' kB';
   $('#file-' + id).removeClass('alert-info')
       .html('<img src="http://img.zcool.cn/community/01ff2756629d096ac725b2c8e95102.gif" width="50px" height="50px;" alt="In progress. Please hold."> ' +
         '上传文件中......' + progress);
   } else {
   $('#file-' + id).addClass('alert-info')
       .html('<img src="http://img.zcool.cn/community/01ff2756629d096ac725b2c8e95102.gif" width="50px" height="50px;" alt="Saving. Please hold."> ' +
         '上传文件中...... ');
   }
  },
  //上传完成后
  onComplete: function(id, fileName, responseJSON) {
   if (responseJSON.success) {
   var img = responseJSON['target']
   $('#file-' + id).removeClass('alert-info')
       .addClass('alert-success')
       .html('<i class="icon-ok"></i> ' +
         '上传成功! ' +
         '“' + fileName + '”'
        );
   } else {
   $('#file-' + id).removeClass('alert-info')
       .addClass('alert-error')
       .html('<i class="icon-exclamation-sign"></i> ' +
         'Error with ' +
         '“' + fileName + '”: ' +
         responseJSON.error);
   }
  },
  onError: function(id, name, reason, maybeXhrOrXdr) {
   console.log(id + '_' + name + '_' + reason);
  },  
  }  
 });

 //手动触发上传上传
  $('#triggerUpload').click(function() {
  uploader.uploadStoredFiles();
 });
 //取消某一个上传
  $('#cancelUpload').click(function() {
  uploader.cancel(0);
 });
 //取消所有未上传的文件
  $('#cancelAll').click(function() {
   //单个文件上传没有作用 因为已经在上传的不能使用这个cancelAll取消上传
   uploader.cancelAll();
 });
 //暂停上传某个文件
 $('#pauseUpload').click(function() {
   uploader.pauseUpload(0);
 });
 // 继续上传
 $('#continueUpload').click(function() {
   uploader.continueUpload(0);
 });
});
</script>

php代码:

//handler.php文件官网上下
require_once "handler.php";
$uploader = new UploadHandler();
// 文件类型限制
$uploader->allowedExtensions = array(); 
// 文件大小限制
$uploader->sizeLimit = null;
// 上传文件框
$uploader->inputName = "qqfile";
// 定义分组文件存放位置
$uploader->chunksFolder = "chunks";
$method = $_SERVER["REQUEST_METHOD"];

//上传目的文件夹(由于原来的文件存放规则不符合我们的需求所以修改了handler.php的代码添加了个文件夹生成规则【你也可以自定义】)
$uploadDirectory = $uploader->getPathName('member_avatar');
if ($method == "POST") {
 header("Content-Type: text/plain");

 // 分组上传完成后对分组进行合并
 if (isset($_GET["done"])) {
  $result = $uploader->combineChunks($uploadDirectory); // 合并分组文件

 } else {
  //开始上传文件
  $result = $uploader->handleUpload($uploadDirectory);
  // 获取上传的名称
  $result["uploadName"] = $uploader->getUploadName();

 }
 echo json_encode($result);
}
//删除文件处理
else if ($method == "DELETE") {
 $result = $uploader->handleDelete($uploadDirectory);
 echo json_encode($result);
}
else {
 header("HTTP/1.0 405 Method Not Allowed");
}

以上是一个简单的自定义模板的配置,希望对大家的学习有所帮助。

Javascript 相关文章推荐
用javascript实现在小方框中浏览大图的代码
Aug 14 Javascript
Javascript 验证上传图片大小[客户端]
Aug 01 Javascript
javascript 模式设计之工厂模式详细说明
May 10 Javascript
Js实现动态添加删除Table行示例
Apr 14 Javascript
javascript实现鼠标放上后下边对应内容变换的效果
Aug 06 Javascript
js下将金额数字每三位一逗号分隔
Feb 19 Javascript
原生js实现jquery函数animate()动画效果的简单实例
Aug 21 Javascript
angular使用post、get向后台传参的问题实例
May 27 Javascript
vue bus全局事件中心简单Demo详解
Feb 26 Javascript
JavaScript数据结构与算法之二叉树遍历算法详解【先序、中序、后序】
Feb 21 Javascript
简单说说如何使用vue-router插件的方法
Apr 08 Javascript
解决父组件将子组件作为弹窗调用只执行一次created的问题
Jul 24 Javascript
使用jQuery处理AJAX请求的基础学习教程
May 10 #Javascript
javascript关于继承解析
May 10 #Javascript
JavaScript继承学习笔记【新手必看】
May 10 #Javascript
实例讲解使用原生JavaScript处理AJAX请求的方法
May 10 #Javascript
深入剖析JavaScript:Object类型
May 10 #Javascript
JavaScript的React Web库的理念剖析及基础上手指南
May 10 #Javascript
快速解决Canvas.toDataURL 图片跨域的问题
May 10 #Javascript
You might like
解析php中var_dump,var_export,print_r三个函数的区别
2013/06/21 PHP
php判断一个数组是否为有序的方法
2015/03/27 PHP
php抽象方法和抽象类实例分析
2016/12/07 PHP
PHP7 echo和print语句实例用法
2019/02/15 PHP
关于jquery css的使用介绍
2013/04/18 Javascript
JS连接SQL数据库与ACCESS数据库的方法实例
2013/11/21 Javascript
JavaScript中如何通过arguments对象实现对象的重载
2014/05/12 Javascript
JS跨域问题详解
2014/11/25 Javascript
浏览器中url存储的JavaScript实现
2015/07/07 Javascript
JS中JSON对象和String之间的互转及处理技巧
2016/04/06 Javascript
JavaScript判断数字是否为质数的方法汇总
2016/06/02 Javascript
vue.js入门(3)——详解组件通信
2016/12/02 Javascript
jQuery中的for循环var与let的区别
2018/04/21 jQuery
解决Layui 表单提交数据为空的问题
2018/08/15 Javascript
浅谈TypeScript 用 Webpack/ts-node 运行的配置记录
2019/10/11 Javascript
vue+node 实现视频在线播放的实例代码
2020/10/19 Javascript
Python os模块中的isfile()和isdir()函数均返回false问题解决方法
2015/02/04 Python
python中偏函数partial用法实例分析
2015/07/08 Python
Python3操作SQL Server数据库(实例讲解)
2017/10/21 Python
Python列表推导式、字典推导式与集合推导式用法实例分析
2018/02/07 Python
使用Scrapy爬取动态数据
2018/10/21 Python
python 定时器,实现每天凌晨3点执行的方法
2019/02/20 Python
python打包成so文件过程解析
2019/09/28 Python
Python实现画图软件功能方法详解
2020/07/28 Python
python使用selenium爬虫知乎的方法示例
2020/10/28 Python
python爬虫基础之urllib的使用
2020/12/31 Python
阿根廷网上配眼镜:SmartBuyGlasses阿根廷
2016/08/19 全球购物
中国领先的专业家电网购平台:国美在线
2016/12/25 全球购物
大四自我鉴定范文
2013/10/06 职场文书
个人工作表现评语
2014/04/30 职场文书
2014年资料员工作总结
2014/11/18 职场文书
小时代观后感
2015/06/10 职场文书
2016廉洁从业学习心得体会
2016/01/19 职场文书
初一英语教学反思
2016/02/15 职场文书
Redis主从配置和底层实现原理解析(实战记录)
2021/06/30 Redis
Redis实战之Lettuce的使用技巧详解
2022/12/24 Redis