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

网络编程 2024/11/15 佚名

3 2 1

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" // 分组上传完成后处理
   }
  },
  //回调函数
  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="/UploadFiles/2021-04-02/loading.gif">

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");
}




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

JS,上传组件,FileUpload,自定义模板