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实现上传图片并预览的效果实现代码
Apr 11 Javascript
基于jquery的textarea发布框限制文字字数输入(添加中文识别)
Feb 16 Javascript
jQuery中验证表单提交方式及序列化表单内容的实现
Jan 06 Javascript
JQuery限制复选框checkbox可选中个数的方法
Apr 20 Javascript
wangEditor编辑器失去焦点后仍然可以在原位置插入图片分析
May 06 Javascript
jQuery实现信息提示框(带有圆角框与动画)效果
Aug 07 Javascript
实例讲解JavaScript中的this指向错误解决方法
Jun 13 Javascript
JS实现鼠标移上去显示图片或微信二维码
Dec 14 Javascript
JS实现异步上传压缩图片
Apr 22 Javascript
ES6的Fetch异步请求的实现方法
Dec 07 Javascript
关于微信小程序获取小程序码并接受buffer流保存为图片的方法
Jun 07 Javascript
Element Alert警告的具体使用方法
Jul 27 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
PHP4实际应用经验篇(3)
2006/10/09 PHP
php实现当前页面点击下载文件的实例代码
2016/11/16 PHP
鼠标右击事件代码(asp.net后台)
2011/01/27 Javascript
JQuery动态创建DOM、表单元素的实现代码
2011/08/09 Javascript
jQuery EasyUI API 中文文档 - Calendar日历使用
2011/10/19 Javascript
Javascript 修改String 对象 增加去除空格功能(示例代码)
2013/11/30 Javascript
javascript实现回车键提交表单方法总结
2015/01/10 Javascript
浅谈JavaScript数据类型及转换
2015/02/28 Javascript
jQuery实现默认是闭合的FAQ展开效果菜单
2015/09/14 Javascript
jQuery1.9+中删除了live以后的替代方法
2016/06/17 Javascript
javascript中Number的方法小结
2016/11/21 Javascript
JS得到当前时间的方法示例
2017/03/24 Javascript
用javascript获取任意颜色的更亮或更暗颜色值示例代码
2017/07/21 Javascript
ReactJs实现树形结构的数据显示的组件的示例
2017/08/18 Javascript
基于vue开发微信小程序mpvue-docs跳转页面功能
2019/04/10 Javascript
JS实现可切换图片的幻灯切换效果示例
2019/05/24 Javascript
原生JS 实现的input输入时表格过滤操作示例
2019/08/03 Javascript
原生JS实现顶部导航栏显示按钮+搜索框功能
2019/12/25 Javascript
python多线程编程方式分析示例详解
2013/12/06 Python
Python全局变量操作详解
2015/04/14 Python
Python可变参数用法实例分析
2017/04/02 Python
Python的装饰器使用详解
2017/06/26 Python
Python3.7基于hashlib和Crypto实现加签验签功能(实例代码)
2019/12/04 Python
Python编程快速上手——strip()函数的正则表达式实现方法分析
2020/02/29 Python
python实现音乐播放和下载小程序功能
2020/04/26 Python
匡威比利时官网:Converse Belgium
2017/04/13 全球购物
查询优化的一般准则有哪些
2015/03/08 面试题
某公司面试题
2012/03/05 面试题
五四青年节的活动方案
2014/08/20 职场文书
2015教师年度考核评语
2015/03/25 职场文书
2015年幼儿园大班工作总结
2015/04/25 职场文书
聘任书格式及范文
2015/09/21 职场文书
Java使用Unsafe类的示例详解
2021/09/25 Java/Android
使用PostGIS完成两点间的河流轨迹及流经长度的计算(推荐)
2022/01/18 PostgreSQL
python图像处理 PIL Image操作实例
2022/04/09 Python
vue项目配置sass及引入外部scss文件
2022/04/14 Vue.js