上传 - 限制为仅一个文件
Plupload - Restrict to only one file
我在 plupload API 文档中没有看到将上传的文件数量限制为任意数量(甚至 1(的选项。
文档失败?还是功能失败?如果它不存在,如果有人需要它,我将努力实现这一目标。
功能失败。我围绕jQuery API做了一个包装器,这就是我所做的,让它为我工作。我的代码执行一些其他业务逻辑,但它应该足以为您提供设置启动。
基本上,绑定到 FilesAdded
事件并在上传器对象上调用 removeFile
(如果文件太多(。我想我添加了 50ms 超时,因为它给我带来了文件尚不存在的问题。
uploader.bind('FilesAdded', function (up, files) {
var i = up.files.length,
maxCountError = false;
plupload.each(files, function (file) {
if(uploader.settings.max_file_count && i >= uploader.settings.max_file_count){
maxCountError = true;
setTimeout(function(){ up.removeFile(file); }, 50);
}else{
// Code to add pending file details, if you want
}
i++;
});
if(maxCountError){
// Too many files uploaded, do something
}
});
max_file_count
是我在创建 pluploader 实例时添加到它的东西。
编辑:我实际上不得不为此做两种不同的方式。以上仅允许一个人上传一定数量的文件(否则会生成错误(。
此代码段的工作方式类似 - 但会删除现有文件并仅上传最新的文件:
uploader.bind('FilesAdded', function (up, files) {
var fileCount = up.files.length,
i = 0,
ids = $.map(up.files, function (item) { return item.id; });
for (i = 0; i < fileCount; i++) {
uploader.removeFile(uploader.getFile(ids[i]));
}
// Do something with file details
});
其他方法:
$(document).ready(function () {
var uploader = new plupload.Uploader({
...
multi_selection: false,
....
});
问候
基于Jonathon Bolster的第二个答案,我编写了这个更简单的代码片段来限制上传到最后一个选定的文件:
uploader.bind('FilesAdded', function(up, files) {
while (up.files.length > 1) {
up.removeFile(up.files[0]);
}
});
此max_file_count: 5
其中 5 是最大上传计数数。
为什么不只是
if (files.length > 1) uploader.splice(1, files.length - 1);
试试这个。它对我来说效果很好。
uploader.bind('FilesAdded', function(up, files) {
if(uploader.files.length > 1)
{
uploader.removeFile(uploader.files[0]);
uploader.refresh();// must refresh for flash runtime
}
。餐厅
想法是测试当前上传器对象中的 num 文件。如果长度大于 1,则只需使用方法 uploader.removeFile
。请注意,参数是files[0]
它不是文件 ID,而是完整的文件对象。
({id:"p17bqh1v4dp42gdf1gan75p16tp3", name:"gnome-globe.png", size:48456, loaded:0, percent:0, status:1})
此致敬意!
现在您可以通过将multi_selection选项设置为 false 来禁用多选
就像这样
var uploader = new plupload.Uploader({
runtimes : 'html5,flash',
browse_button : 'button_id',
multi_selection:false, //disable multi-selection
...
官方文档在这里:http://www.plupload.com/documentation.php
FilesAdded: function(up, files) {
up.files.splice(0,up.files.length-1);
},
multi_selection: false,
使用up.files
,只需files
。 files
将始终包含我们从文件浏览器中选择的单个项目。 up.files
是我们需要缩小到最后一个选定文件的实际列表。
只允许上传一个文件:
uploader.bind('FilesAdded', function(up, files) {
$.each(files, function(i, file) {
if(uploader.files.length!=1){uploader.removeFile(file); return;}
});
});
允许一次选择一个文件:
uploader.bind('FilesAdded', function(up, files) {
$.each(files, function(i, file) {
if(i){up.removeFile(file); return;}
});
});
允许一次上传一个文件:
uploader.bind('FilesAdded', function(up, files) {
$.each(files, function(i, file) {
if(uploader.files.length!=1){uploader.removeFile(file); return;}
});
});
uploader.bind('FileUploaded', function(up, file,response) {
up.removeFile(file);
});
我意识到这已经得到了回答,但我采用的解决方案是只使用 QueueChanged
回调:
QueueChanged: function(uploader) {
// Called when queue is changed by adding or removing files
//log('[QueueChanged]');
if(uploader.files.length > 1) {
uploader.files.splice(0, (parseInt(uploader.files.length) - 1));
}
}
使用此代码,它只保留最后选择的文件(以防他们再次选择的原因是因为他们选择了错误的文件(。
如果您想使用自定义上传器,并且一次上传一个文件,则不要自动上传并将最后一个添加的文件变成新文件,请使用此选项。
uploader.bind('FilesAdded', function(up, files) {
// Clear the HTML
$('#plupload-files').html('');
// Plup does not offer before file added event
if (up.files.length > 1) {
up.splice(0, up.files.length);
up.addFile(files[0])
return;
}
// $.each(files, function(){....
}
我们拼接整个数组,因为 plup 已经将所有文件添加到队列中,如果您像接受的答案一样拼接队列,您实际上会在每次用户尝试添加文件时添加一个文件,如果他们尝试单独添加新文件,它将保留旧文件在 files 数组中的 pos[0],
然后我们添加他们尝试添加的文件的第一个文件。这样,队列中只有一个文件,并且始终是他们尝试添加的最后一组文件中的第一个文件。
即。
拖到上传 'file1.jpg', 'file2.jpg', 'file3.jpg
清除整个队列,重新添加"file1.jpg">
拖到上传 'file4.jpg', 'file5.jpg', 'file6.jpg
清除整个队列,重新添加"file4.jpg">
拖到上传"文件99.jpg
清除整个队列,重新添加"file99.jpg">
这允许您管理自定义 plup,如果您一次只想上传一个文件。如前所述,其他答案仅工作一次,或者自动开始上传。
上传前直接删除不必要的文件:
$('uploadfiles').onclick = function()
{
while (uploader.files.length > 1)
{
uploader.removeFile(uploader.files[0]);
}
uploader.start();
return false;
};
在尝试了每个解决方案之后,我想出了最简单的解决方案——这似乎有效。
我正在使用核心 api,multi_selection设置为 false。然后,在选择(添加(第一个文件后,我插入到 FilesAdd 事件中的第二行代码将隐藏浏览链接。我不认为这可以通过jquery小部件来完成,而且我还发现,除非上传链接覆盖浏览链接所在的位置,否则它仍然处于活动状态。
uploader.bind('FilesAdded', function(up, files) {
//line below hides button
document.getElementById("browse").style.display = "none";
var html = '';
plupload.each(files, function(file) {
html += '<li id="' + file.id + '">' + file.name + ' (' + plupload.formatSize(file.size) + ') <b></b></li>';
});
document.getElementById('filelist').innerHTML += html;
}(;
- 如何在android中使用phonegap将文件从一个文件夹移动/复制到另一个文件夹
- 如何在elfinder插件(一个文件管理器插件)上获得上传前事件
- Sails.js:同时发布文本输入和一个文件
- 正在传递JSONP标头's数据参数到另一个文件中的AJAX请求
- 要求定义另一个文件中的对象
- 是否可以使用JavaScript/AAJAX在客户端创建一个文件
- 如何将所有JS文件连接到一个文件夹中
- 请求准备一个文件并返回路径,允许用户在准备好时下载
- 从AngularJS中的另一个文件中的控制器访问服务
- 将任何CDN配置为只传递一个文件,无论请求的url是什么
- 通过AngularJS promise下载一个文件
- Grunt-将多个文件最小化/处理为一个文件
- 文件的节点自动化移动到另一个文件夹中
- 用于文件移动到另一个文件夹的Javascript自动化
- 需要从一个文件中获取多个模块
- 仅首先需要使用jasmine从节点添加一个文件
- jQuery Mobile样式从另一个文件加载内容
- 最小化CSS/JS文件,并使用命令行创建一个文件
- 我如何制作一个文件的副本并用gump将其移动到父文件夹
- 为什么当我上传文件并点击更多上传另一个文件的第一个删除