网站首页  汉语字词  英语词汇  考试资料  写作素材  旧版资料

请输入您要查询的考试资料：

　

标题 JS上传组件FileUpload自定义模板的使用方法
内容
    这篇文章主要为大家详细介绍了JS上传组件FileUpload自定义模板的使用方法，感兴趣的小伙伴们可以参考一下
    FileUpload 是国外一个纯javascript 写的大文件上传组件，该组件支持分片上传，断点续传，多文件等功能。
    下面就为大家分享FileUpload上传组件自定义模板（FineUploaderBasic）的使用方法：
    以下是配置代码：
    前端配置：
    <!--定义按钮-->
    <div id="basic_uploader_fine"><i></i>选择文件</div>
    <div id="triggerUpload">点击上传</div>
    <!--显示信息-->
    <div id="messages"></div>
    <div id="cancelUpload">取消</div>
    <div id="cancelAll">取消全部</div>
    <div id="pauseUpload">暂停上传</div>
    <div id="continueUpload">继续上传</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 + '">'+fileName+'</div>');
      },
      onUpload: function(id, fileName) {
       $('#file-' + id).addClass('alert-info')
           .html('<img src="client/loading.gif"> ' +
            '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;"> ' +
             '上传文件中......' + progress);
       } else {
       $('#file-' + id).addClass('alert-info')
           .html('<img src="http://img.zcool.cn/community/01ff2756629d096ac725b2c8e95102.gif" width="50px" height="50px;"> ' +
             '上传文件中...... ');
       }
      },
      //上传完成后
      onComplete: function(id, fileName, responseJSON) {
       if (responseJSON.success) {
       var img = responseJSON['target']
       $('#file-' + id).removeClass('alert-info')
           .addClass('alert-success')
           .html('<i></i> ' +
             '上传成功！ ' +
             '“' + fileName + '”'
            );
       } else {
       $('#file-' + id).removeClass('alert-info')
           .addClass('alert-error')
           .html('<i></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");
    }
    以上是一个简单的自定义模板的配置，希望对大家的学习有所帮助。
随便看

　

在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。

　

Copyright © 2002-2024 cuapp.net All Rights Reserved
更新时间：2025/5/15 8:30:50