在流星收藏FS中上传小文件的进度条
Upload progress bar for small files in meteor CollectionFS
使用meteor-cfs-ui
-包,您可以显示上传文件的进度条。但这只适用于大于2MB的für文件。如果文件较小,条形图将从0%跳到100%。
在这里,我找到了一个解决方案,它使用以下代码:
if(fsFile.original.size < (2097152)*10) {
var chunkSize = fsFile.original.size / 10;
FS.config.uploadChunkSize = chunkSize;
}
uploadFile(fsFile, fullFileName, projectId);
但是我必须把代码放在哪里呢?
我这样申报我的店铺:
Images = new FS.Collection("images", {
stores: [
new FS.Store.FileSystem("something", {
transformWrite: function (fileObj, readStream, writeStream) {
// do transformations
}
})]
});
上传是这样完成的:
FS.Utility.eachFile(event, function (file) {
var newFile = new FS.File(file);
newFile.uploadedFrom = Meteor.userId();
data = Images.insert(newFile, function (error, fileObject) {});
});
所以我想这是一个愚蠢的问题,但我真的不明白,把代码放在哪里。。。
上传发生在集合插入时,因此应该能够在此之前设置chunkSize
:
FS.Utility.eachFile(event, function (file) {
var newFile = new FS.File(file);
newFile.uploadedFrom = Meteor.userId();
var maxChunk = 2097152;
FS.config.uploadChunkSize =
( newFile.original.size < 10*maxChunk ) ? newFile.original.size/10 : maxChunk;
data = Images.insert(newFile, function (error, fileObject) {});
});
此外,如果您正在使用FS.EventHandlers.insertFiles
,但没有看到加载栏,请在客户端代码中创建此函数:
/**
* Replace for original FS.EventHandlers.insertFiles function.
*/
function cfsInsertFiles(collection, options) {
options = options || {};
var afterCallback = options.after;
var metadataCallback = options.metadata;
function insertFilesHandler(event) {
FS.Utility.eachFile(event, function (file) {
var f = new FS.File(file);
var maxChunk = 2097152;
FS.config.uploadChunkSize =
(f.original.size < 10 * maxChunk) ? f.original.size / 10 : maxChunk;
if (metadataCallback) {
FS.Utility.extend(f, metadataCallback(f));
}
collection.insert(f, afterCallback);
});
}
return insertFilesHandler;
}
最后使用它来代替FS.EventHandlers.insertFiles
。例如:
Template.files.events({
'dropped .imageArea': cfsInsertFiles(Images, {
metadata: function (fileObj) {
return {
owner: Meteor.userId(),
foo: "bar"
};
},
after: function (error, fileObj) {
console.log("Inserted", fileObj.name);
}
})
});
相关文章:
- 如果使用javascript函数屏幕太小,我该如何更改HTML文件的背景色
- java,javascript签名的小程序(文件选择,ftp上传)安全性/套接字异常
- Javascript获取具有不同id的文件数's来自没有多个属性的文件输入元素
- Grunt-将多个文件最小化/处理为一个文件
- 最小化CSS/JS文件,并使用命令行创建一个文件
- 将jQuery.js文件附加到html文档中
- YepNopeJS:在小JS文件完全加载之前触发回调
- 在Dojo构建期间,在最小化期间关闭文件编译
- 在HTML文档中使用XML文件中的数据
- 使用 PHP 将 css/js 文件分配给 html 文档
- 将变量从服务器上的外部文件加载到 HTML 文档中
- 如何在Django表单中设置可接受的文件类型'的FileInput小部件
- 如何使用Chrome文档中的文件而不是URL
- Crocodic文档的字体在移动设备上太小
- 如何在angular js中从github获取原始自述文件后将其转换为html格式的文档
- Krajee文件输入小部件'上传'方法引发异常
- Grunt文件Concat和css最小错误
- 使用JavaScript,我可以上传一个word文件并使用.replaces然后另存为新文档吗
- CRM Dynamics 2013 JavaScript验证自由文本字段中的最小字符数
- 如何保持添加文件到文件数组与多个按钮单击