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 相关文章推荐
js 时间格式与时间戳的相互转换示例代码
Dec 25 Javascript
ie9 提示'console' 未定义问题的解决方法
Mar 20 Javascript
JavaScript设计模式之观察者模式(发布者-订阅者模式)
Sep 24 Javascript
Javascript基础教程之关键字和保留字汇总
Jan 18 Javascript
深入理解JavaScript系列(27):设计模式之建造者模式详解
Mar 03 Javascript
浅谈Sizzle的“编译原理”
Apr 14 Javascript
JQuery记住用户名密码实现下次自动登录功能
Apr 27 Javascript
关于JavaScript限制字数的输入框的那些事
Aug 14 Javascript
JS异步文件上传(兼容IE8+)
Apr 02 Javascript
将Sublime Text 3 添加到右键中的简单方法
Dec 12 Javascript
Angular6 用户自定义标签开发的实现方法
Jan 08 Javascript
9个JavaScript日常开发小技巧
Oct 06 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获取访问设备信息的方法示例
2019/02/20 PHP
PHP模型Model类封装数据库操作示例
2019/03/14 PHP
javascript 隐藏/显示指定的区域附HTML元素【legend】用法
2010/03/05 Javascript
仿新浪微博登陆邮箱提示效果的js代码
2013/08/02 Javascript
调用HttpHanlder的几种返回方式小结
2013/12/20 Javascript
JavaScript的常见兼容问题及相关解决方法(chrome/IE/firefox)
2013/12/31 Javascript
RequireJS入门一之实现第一个例子
2015/09/30 Javascript
Nodejs的express使用教程
2015/11/23 NodeJs
javascript实现数组去重的多种方法
2016/03/14 Javascript
JS+canvas实现的五子棋游戏【人机大战版】
2017/07/19 Javascript
用js实现每隔一秒刷新时间的实例(含年月日时分秒)
2017/10/25 Javascript
Angular 实现输入框中显示文章标签的实例代码
2018/11/07 Javascript
angular4自定义表单控件[(ngModel)]的实现
2018/11/23 Javascript
vue+element加入签名效果(移动端可用)
2019/06/17 Javascript
微信小程序解析富文本过程详解
2019/07/13 Javascript
jquery.pager.js分页实现详解
2019/07/29 jQuery
ES6常用小技巧总结【去重、交换、合并、反转、迭代、计算等】
2019/12/21 Javascript
JavaScript, select标签元素左右移动功能实现
2020/05/14 Javascript
JavaScript实现商品评价五星好评
2020/11/30 Javascript
[50:38]DOTA2-DPC中国联赛 正赛 Phoenix vs CDEC BO3 第二场 3月7日
2021/03/11 DOTA
Python正则表达式介绍
2012/08/06 Python
python抓取京东商城手机列表url实例代码
2013/12/18 Python
Python常用模块用法分析
2014/09/08 Python
win10环境下python3.5安装步骤图文教程
2017/02/03 Python
Python中表达式x += y和x = x+y 的区别详解
2017/06/20 Python
详解用Python实现自动化监控远程服务器
2019/05/18 Python
Python批量生成幻影坦克图片实例代码
2019/06/04 Python
解决Django连接db遇到的问题
2019/08/29 Python
Python如何计算语句执行时间
2019/11/22 Python
Python计算不规则图形面积算法实现解析
2019/11/22 Python
可能这些是你想要的H5软键盘兼容方案(小结)
2019/04/23 HTML / CSS
Can a struct inherit from another class? (结构体能继承类吗)
2014/07/22 面试题
大学生的网络创业计划书
2013/12/26 职场文书
2014年平安创建工作总结
2014/11/24 职场文书
经营场所使用证明
2015/06/19 职场文书
SQL基础查询和LINQ集成化查询
2022/01/18 MySQL