设为首页 加入收藏

TOP

30分钟玩转Net MVC 基于WebUploader的大文件分片上传、断网续传、秒传(文末附带demo下载)(二)
2019-09-17 18:01:57 】 浏览:38
Tags:30分钟 Net MVC 基于 WebUploader 文件 分片 上传 秒传 文末 附带 demo 下载
var GUID = WebUploader.Base.guid();//一个GUID $(function () { var $ = jQuery; var $list = $('#thelist'); var uploader = WebUploader.create({ // 选完文件后,是否自动上传。 auto: false, // swf文件路径 swf: applicationPath + '../Content/Uploader.swf', // 文件接收服务端。 server: applicationPath + 'Home/Upload', // 选择文件的按钮。可选。 // 内部根据当前运行是创建,可能是input元素,也可能是flash. pick: '#picker', chunked: true,//开始分片上传 chunkSize: 2048000,//每一片的大小 formData: { guid: GUID //自定义参数,待会儿解释 }, // 不压缩image, 默认如果是jpeg,文件上传前会压缩一把再上传! resize: false }); // 当有文件被添加进队列的时候 uploader.on('fileQueued', function (file) { $list.append('<div id="' + file.id + '" class="item">' + '<h4 class="info">' + file.name + '</h4>' + '<p class="state">等待上传...</p>' + '</div>'); var name = file.name; //文件名 var type = fileType(file.name); //文件类型,获取的是文件的后缀 var volume = bytesToSize(file.size); //文件大小格式化 var oTr = $("<tr></tr>"); var str = '<td><cite title="' + name + '">' + name + '</cite></td>'; str += '<td>' + type + '</td>'; str += '<td>' + volume + '</td>'; str += '<td id="jintutiao">'; str += '<span id="baifenbi"></span>0%'; str += '</td>'; str += '<td id="uploding">等待上传</td>'; $(".fileList").html(str) }); var aa = 1; // 文件上传过程中创建进度条实时显示。 uploader.on('uploadProgress', function (file, percentage) { var $li = $('#' + file.id), $percent = $li.find('.progress .progress-bar'); // 避免重复创建 if (!$percent.length) { $percent = $('<div class="progress progress-striped active">' + '<div class="progress-bar" role="progressbar" style="width: 0%">' + '</div>' + '</div>').appendTo($li).find('.progress-bar'); } $li.find('p.state').text('上传中'); $("#uploding").html("上传中"); $percent.css('width', percentage * 100 + '%'); if (percentage == 1) { aa++; } if (aa<=2) { var shuzi=percentage * 100; $("#baifenbi").html(shuzi.toFixed(2)); } }); // 文件上传成功,给item添加成功class, 用样式标记上传成功。 uploader.on('uploadSuccess', function (file, response) { $('#' + file.id).find('p.state').text('已上传'); $.post('Home/Merge', { guid: GUID, fileName: file.name }, function (data) { $("#uploader .state").html("上传成功..."); $("#uploding").html("上传成功"); }); }); // 文件上传失败,显示上传出错。 uploader.on('uploadError', function (file) { $('#' + file.id).find('p.state').text('上传出错'); }); // 完成上传完了,成功或者失败,先删除进度条。 uploader.on('uploadComplete', function (file) { $('#' + file.id).find('.progress').fadeOut(); }); //所有文件上传完毕 uploader.on("uploadFinished", function () { //提交表单 }); //开始上传 $("#ctlBtn").click(function () { uploader.upload(); }); }); //字节大小转换,参数为b function bytesToSize(bytes) { var sizes = ['Bytes', 'KB', 'MB', 'G']; if (bytes == 0) return 'n/a'; var i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024))); return (bytes / Math.pow(1024, i)).toFixed(1) + ' ' + sizes[i]; }; //通过文件名,返回文件的后缀名
首页 上一页 1 2 3 下一页 尾页 2/3/3
】【打印繁体】【投稿】【收藏】 【推荐】【举报】【评论】 【关闭】 【返回顶部
上一篇K2制作流程 下一篇计算字符串得出结果

最新文章

热门文章

Hot 文章

Python

C 语言

C++基础

大数据基础

linux编程基础

C/C++面试题目