这篇文章主要为大家详细介绍了 JS 上传组件 FileUpload 自定义模板的使用方法,感兴趣的小伙伴们可以参考一下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
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");
- }
来源: http://www.phperz.com/article/17/0223/265880.html